Javascript 如何使用angularjs创建级联md select？

我有这样的JSON

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

                    ]
                };

从上面，我需要创建一个级联md-select，第一个md-select应该有Twitter、Facebook和Linkedin

一旦更改Twitter，它应该在下一个md选择中显示以下内容，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.controller('MainCtrl', function($scope) {
   $scope.analytics = {
                    'Twitter': [
                        'Following',
                        'Followers',
                        'Tweets'
                    ],
                    'Facebook': [
                        'People engaged',
                        'Likes',
                        'Clicks',
                        'Views'
                    ],
                    'LinkedIn': [
                        'Overview'

                    ]
                }; 
});

---

这是我在

中的代码解决这个问题的关键是在第一个选项的值上放置一块手表，然后选择并控制第二个选项。还记得在主选择更改时清除从属选择

示例实现：

在范围中添加一个

level2

变量。它将保存从属选择的选项

将手表放在第一个型号上：

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

{{k}
{{t}

---

请参阅一个分叉按钮：

解决此问题的关键是在第一个按钮的值上放置一块手表，然后选择并控制第二个按钮的选项。还记得在主选择更改时清除从属选择

示例实现：

在范围中添加一个

level2

变量。它将保存从属选择的选项

将手表放在第一个型号上：

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

{{k}
{{t}

---

请看一个分叉的砰砰声：

它可能比这更简单。删除

$watch

，只需更改

md选项中
metrics
项中的
ng repeat

<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 analytics[type]">
        {{ t }}
    </md-option>
</md-select>


{{k}
{{t}
可能比这更简单。删除
$watch
，只需更改
md选项中
metrics
项中的
ng repeat

<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 analytics[type]">
        {{ t }}
    </md-option>
</md-select>


{{k}
{{t}