user6934713 user6934713 - 27 days ago 8
AngularJS Question

Angular cascading dropdowns

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);
});
}

Answer

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