如何在AngularJS中更改另一個下拉列表中更改多個下拉值

我有一個包含多行的表，每行都有下拉列表以選擇值。所有的下拉菜單都有相同的列表。起初，所有下拉菜單都按照JSON選擇了值。但是我想要做的是在頁面頂部有另一個下拉菜單並更改其值，更新表中的所有下拉值。我爲下拉菜單創建了一個AngularJS指令。如何在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

來源

2017-04-18 vansha

我想更新所有的下拉列表中的值（這是有錶行是指令下拉菜單的變化）改變頁面頂部的下拉值（這也是指令下拉菜單的實例） – vansha

基本上我打算做的是調用所有實例的更新函數，並明確地通過最高下拉值的變化。 – vansha

添加模板下拉 – vansha

有多種方式，你可以解決這個問題：

首先，具有其他$watch在你的指令，它改變selected根據myrating父。

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> 
```
現在
，在控制器，broadcast新myrating事件：
```
vm.myratingChanged = function(myrating) { 
    $scope.$broadcast("myratingchanged", myrating) 
} 
```
最後，在該指令，收聽並更新：
```
scope.$on('myratingchanged', function(event, data) { 
    scope.selected = data 
}) 
```
這是事件方法的working example。

使用事件總是比不得不$watch而那也是由父母更簡潔的方法。做出明智的選擇！ :)

來源

2017-04-18 11:17:52 tanmay

您可以添加以下的手錶到您的控制器放入您的plunkr代碼，並嘗試執行，

$scope.$watch('myrating', function(){ 
     angular.forEach(vm.data, function(item){ 
     item.rating=$scope.myrating; 
     }); 
    });

來源

2017-04-18 13:54:44

如何在AngularJS中更改另一個下拉列表中更改多個下拉值

回答

相關問題