如何只更新当前选定的ng重复元素，而不是全部更新

How to update only the currently selected ng-repeat element instead of all

本文关键字：更新 元素 全部 ng      更新时间：2023-09-26

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

这是我的Plunker

每当我已经有1..n个选择框，然后从当前div的第一个选择框中选择specialItem4时，之前的所有第二个选择框也会更新，并且只包含两个选择选项special 1和special2，这两个选项仅为>special Item4

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的新手。

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

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重复中使用新指令。请注意，select的可能值可以向下传递到指令中，因为它们已经在外部范围中了。

 <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

相关文章：