javascript - 如何在 AngularJS 中更改另一个下拉列表时更新多个下拉值

Question

我有一个包含多行的表格，每行都有用于选择值的下拉列表。所有下拉列表都有相同的列表。首先，所有下拉菜单都根据 JSON 选择值。但我想做的是在页面顶部有另一个下拉列表，并在更改其值时更新表中的所有下拉值。 我为下拉菜单创建了一个 AngularJS 指令。

 app.directive('dropdown', function($timeout){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            list: '=dropdown',
            ngModel: '='
        },
        templateUrl: '/dropdownView.html',
        replace: true,
        link: function(scope, elem, attrs, ngModel) {
            scope.height = elem[0].offsetHeight;
            scope.$watch('ngModel',function(){
                scope.selected = ngModel.$modelValue;  
            });
            scope.update = function(rating) {
                ngModel.$setViewValue(rating);
                ngModel.$render(); 
            };
        }
    };
});

<div dropdown="ratings" ng-model="list" ></div>

dropdownView.html

<div class="dropdown" ng-click="open=!open" ng-class="{open:open}">
<div ng-repeat="rating in list" style="top: {{($index + 1) * height}}px; -webkit-transition-delay: {{(list.length - $index) * 0.03}}s; z-index: {{list.length - $index}}" ng-hide="!open" ng-click="update(rating)" ng-class="{selected:selected===rating}">
  <span>{{rating}}</span>
</div>
<span class="title" style="top: 0px; z-index: {{list.length + 1}}">
  <span>{{selected}}</span>
</span>
<span class="clickscreen" ng-hide="!open">&nbsp;</span>

如果有人知道任何可能的解决方案，请帮助我。

这是一个 plunker从我的代码创建

Answer 1

有多种方法可以解决这个问题:

• 首先，在你的指令中有另一个 $watch 根据 myrating 改变 selected parent 。

  scope.$watch('$parent.myrating', function(newVal, oldVal) {
    if(newVal) {
      scope.selected = newVal;
    }
  });
  

  这是 working example

• 其次，您可以使用事件。从 myrating 下拉菜单所在的父级广播一个事件。并且，在子指令中听同样的内容。

  为此，您需要 ng-change 从 dropdown 触发，所以，

  <div dropdown="ratings" ng-change="main.myratingChanged(myrating)" ...></div>
  

  现在，在 Controller 中，广播带有新myrating的事件:

  vm.myratingChanged = function(myrating) {
    $scope.$broadcast("myratingchanged", myrating)
  }
  

  最后，在指令中，监听它并更新 scope.selected:

  scope.$on('myratingchanged', function(event, data) {
    scope.selected = data
  })
  

  这是 working example事件方法。

---

使用事件总是比必须 $watch 更干净的方法，而且也来自父级。做出明智的选择! :)