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

Question

I am having the following problem: I have written an app where one can repeatedly add a div that contains two select boxes. The contents of the second select box depend on the selection of the first select box. However, once I select a specific item from the first select box, the contents of all existing second select boxes are updated. What I want is only the current second select box to be updated.

Here is my Plunker

Whenever I have 1..n select boxes already and then select specialItem4 from the first select box of the current div, all preceding second select boxes are updated as well and contain just the two selection options special1 and special2 which are defined for specialItem4 only. I just want that current second select box to be updated:

A snippet of the HTML code:

<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>

A snipped of the JS code:

    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];
            }
        }
    };  

I'd be grateful for help as I am a total newbie to AngularJS.

Answer 1

Since the list to use as the second dropdown varies in each pair, it needs to be isolated. Using a directive for the pair of dropdowns would allow you to encapsulate all the logic related to the two dropdowns together. In your case move the change listener into the new directive like so:

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];
            }
          }
        };
    }
  }  
});

Then change your HTML to use the new directive in your ng-repeat. Note that, the possible values for the selects can be passed down into the directive since you already have them in the outer scope.

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

Here is an updated Plunkr: http://plnkr.co/edit/Sr1s6I3zleCGr95eYa9e?p=preview