Angular cascading dropdowns

Question

I am trying to create two drop downs one with topic and the other one with videos. The videos one is going to be filter by the topics. Thank you in advance for the help.

        <md-input-container flex>
            <label>Topic</label>
            <md-select ng-model="selected.topic" required ng-change="getVideosByTopicId(selected.topic)">
                <md-option ng-repeat="topic in topics" value="{{topic.TopicID}}">{{topic.TopicName}}</md-option>
            </md-select>
        </md-input-container>
        <md-input-container flex>
            <label>Video</label>
            <md-select ng-model="selected.video" required >
                <md-option ng-repeat="video in videos" value="{{video.VideoID}}">{{video.Name}}</md-option>
            </md-select>
        </md-input-container>

And this is the controller

function getVideosByTopicId(topicId) {
    return $http.post(baseUrl + 'Test/getVideosByTopicId', topicId).then(function (response) {
        return $.parseJSON(response.data);
    });
}

if everything is fine with your js code then assign the response to $scope.videos use that in ng-repeat — Sa E Chowdary
– Sa E Chowdary, Commented Nov 10, 2016 at 12:35

Sajeetharan · Accepted Answer · 2016-11-10 12:34:10Z

1

You can do this,

<md-select ng-model="type" >
    <md-option ng-value="k" data-ng-repeat="(k,v) in videos">{{ k }}</md-option>
</md-select>
    <md-select ng-model="metrics" >
   <md-option ng-value="t" data-ng-repeat="t in level2">{{ t }}</md-option>
</md-select>

DEMO

answered Nov 10, 2016 at 12:34

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user6934713 Over a year ago

Thank you. Which one is better to use: watch or ng - change. Could you please show me an example with ng-change.

Sajeetharan Over a year ago

ng-change is the suggested way

Sajeetharan Over a year ago

what do you want to do with ng-changed?

user6934713 Over a year ago

Populate the second combo box when the first one changes

Sajeetharan Over a year ago

@user6934713 yes you can do taht via ng-change and send the request

Collectives™ on Stack Overflow

Angular cascading dropdowns

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related