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

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