我有这样的 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
中的代码
最佳答案
解决这个问题的关键是监视第一个选择的值并控制第二个的选项。还记得清除从属选择,当主选择改变时!
示例实现:
在范围内添加一个 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
关于javascript - 我如何使用 angularjs 创建级联 md-select?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30103673/