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

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

首先，您的指令中有另一个selected根据父级myrating更改scope.$watch('$parent.myrating', function(newVal, oldVal) { if(newVal) { scope.selected = newVal; } });。
```
myrating
```
此处为。

第二，您可以使用活动。从ng-change下拉列表中的父项广播事件。并且，在儿童指令中听同样的话。

要实现此目的，您需要dropdown <div dropdown="ratings" ng-change="main.myratingChanged(myrating)" ...></div>点击broadcast，

myrating

现在，在控制器中，vm.myratingChanged = function(myrating) { $scope.$broadcast("myratingchanged", myrating) }新事件scope.selected：

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

最后，在指令中，听取它并更新$watch：

from operator import itemgetter
import pandas
import itertools

p = pandas.read_csv('Artits.tsv', sep='\s+')

def diff(x):
    return x

def max_any_color(cols):
    grey = []
    blue = []
    black = []
    red = []
    for row in cols.iterrows():
        date = row[1]['Date']
        grey.append(row[1]['percent_gray'])
        blue.append(row[1]['percent_blue'])
        black.append(row[1]['percent_black'])
        red.append(row[1]['percent_red'])


    gb = max([abs(a[0] - a[1]) for a in itertools.product(grey,blue)])
    gblack = max([abs(a[0] - a[1]) for a in itertools.product(grey,black)])
    gr = max([abs(a[0] - a[1]) for a in itertools.product(grey,red)])
    bb = max([abs(a[0] - a[1]) for a in itertools.product(blue,black)])
    br = max([abs(a[0] - a[1]) for a in itertools.product(blue,red)])
    blackr = max([abs(a[0] - a[1]) for a in itertools.product(black,red)])

    l = [gb,gblack,gr,bb,br,blackr]
    c = ['grey/blue','grey/black','grey/red','blue/black','blue/red','black/red']
    max_ = max(l)
    between_colors_index = l.index(max_)
    return c[between_colors_index], max_ 

p.groupby('Artist').apply(lambda x: max_any_color(x))

这是事件方法的working example。

使用事件总是比Leonardo (blue/red, 35) Michelangelo (blue/red, 43) Raphael (blue/red, 45) Titian (black/red, 43)更简洁，而父母也是如此。做出明智的选择！：）

Answer 2

您可以在plunkr代码中将以下手表添加到您的控制器中并尝试执行，

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

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

2 个答案: