角カスケードドロップダウン

Question

トピックを使用して2つ、ビデオを使用して2つのドロップダウンを作成しようとしています。ビデオはトピック別にフィルタリングされます。事前にお手伝いいただきありがとうございます。

 <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> 

そして、これはあなたがこれを行うことができ、コントローラ

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

Answer 1

で、

<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