Question

我遇到以下问题：我编写了一个应用程序，可以重复添加包含两个选择框的div。第二个选择框的内容取决于第一个选择框的选择。但是，一旦我从第一个选择框中选择了特定项目，就会更新所有现有第二个选择框的内容。我想要的只是当前第二个要更新的选择框。

这是我的Plunker

每当我有1..n选择框然后从当前div的第一个选择框中选择 specialItem4 时，所有前面的第二个选择框也会更新并且只包含为 specialItem4 <定义的两个选项 special1 和 special2 / em> 。我只想更新当前的第二个选择框：

HTML代码片段：

<div ng-switch-default="ng-switch-default"> <select ng-model="rule.parameter" ng-options="sel1.name for sel1 in selects1" ng-change="change(rule.parameter)"></select> <select ng-options="sel2 for sel2 in filteredselect2" ng-model="rule.relation"></select> </div>

剪掉了JS代码：

scope.change = function (sel2Selection) { scope.filteredselect2 = []; for(var key in scope.selects2){ if(angular.isDefined(scope.selects2[key][sel2Selection.relation])){ scope.filteredselect2 = scope.selects2[key][sel2Selection.relation]; } } };

我很感激你的帮助，因为我是AngularJS的新手。

Answer 1

由于用作第二个下拉列表的列表在每对中都有所不同，因此需要将其隔离。使用这对下拉列表的指令将允许您将与两个下拉列表相关的所有逻辑封装在一起。在您的情况下，将更改侦听器移动到新指令中，如下所示：

dynamicSelect.directive('dynamicSelectPair', function() {
  return {
    scope: {
      rule: '=',
      selects1: '=',
      selects2: '='
    },
    template: '<select ng-model="rule.parameter" ng-options="sel1.name for sel1 in selects1" ng-change="change(rule.parameter)"></select><select ng-options="sel2 for sel2 in filteredselect2" ng-model="rule.relation"></select>',
    link: function(scope) {
      // change the second select content depending on the select item of the first select
        scope.change = function(sel2Selection) {
          scope.filteredselect2 = [];

          for (var key in scope.selects2) { 
            if (angular.isDefined(scope.selects2[key][sel2Selection.relation])) {
              scope.filteredselect2 = scope.selects2[key][sel2Selection.relation];
            }
          }
        };
    }
  }  
});

然后更改HTML以在ng-repeat中使用新指令。请注意，选择的可能值可以传递到指令中，因为您已将它们放在外部作用域中。

 <div ng-switch-default="ng-switch-default">
        <div dynamic-select-pair selects1='selects1' selects2='selects2' rule='rule'>
 </div>

这是一个更新的Plunkr：http://plnkr.co/edit/Sr1s6I3zleCGr95eYa9e?p=preview

如何仅更新当前选定的ng-repeat元素而不是全部

1 个答案: