javascript - 我如何使用 angularjs 创建级联 md-select？

Question

我有这样的 JSON，

 $scope.analytics = {
                    'Twitter': [
                        'Following',
                        'Followers',
                        'Tweets'
                    ],
                    'Facebook': [
                        'People engaged',
                        'Likes',
                        'Clicks',
                        'Views'
                    ],
                    'LinkedIn': [
                        'Overview'

                    ]
                };

从上面，我需要创建一个级联的 md-select ，首先 md-select 应该有 Twitter，Facebook 和 Linkedin。

OnChanging Twitter，它应该在下一个 md-select 中显示 Following,Followers,Tweets。

HTML:

<md-select ng-model="type" >
 <md-option ng-value="t" data-ng-repeat="t in analytics">{{ t }}</md-option>
 </md-select>
 <md-select ng-model="metrics" >
 <md-option ng-value="t" data-ng-repeat="t in analytics">{{ t }}</md-option>
</md-select>

App.JS:

app.controller('MainCtrl', function($scope) {
   $scope.analytics = {
                    'Twitter': [
                        'Following',
                        'Followers',
                        'Tweets'
                    ],
                    'Facebook': [
                        'People engaged',
                        'Likes',
                        'Clicks',
                        'Views'
                    ],
                    'LinkedIn': [
                        'Overview'

                    ]
                }; 
});

这是我在 Cascading md-select 中的代码

Answer 1

解决这个问题的关键是监视第一个选择的值并控制第二个的选项。还记得清除从属选择，当主选择改变时!

示例实现:

在范围内添加一个 level2 变量。它将保存依赖选择的选项。

将 watch 放在第一个模型上:

$scope.$watch('type', function(newval, oldval) {
  if( newval ) {
    $scope.level2 = $scope.analytics[newval];
  }
  else {
    $scope.level2 = [];
  }

  // delete the dependent selection, if the master changes
  if( newval !== oldval ) {
    $scope.metrics = null;
  }
});

最后，标记需要稍微调整一下才能正确显示:

<md-select ng-model="type" >
    <md-option ng-value="k" data-ng-repeat="(k,v) in analytics">{{ 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>

查看 fork 的 plunk:http://plnkr.co/edit/rI3AsC2plZ3w82WRBjAo?p=preview