Angularjs 如何在每次动态添加新项时跟踪现有数据 添加项 myApp.directive（'myDirective'，function（）{ 返回{ 范围：{ 类别选项：“=”， 删除项：“&”， 索引：“@”， itemOptions:“=”， 类别选项更改：“&” }, 限制：“AE”， 模板：“

\r”+ “\n”+ “\r”+ “\n”+ “选择\r”+ “\n”+ “\r”+ “\n”+ “\r”+ “\n”+ “选择\r”+ “\n”+ “\r”+ “\n”+ “[]\r”+ “\n”+ “

\r”+ “\n” } }); 每次单击时，都会添加一个带有两个选择控件的新项目。根据第一个选择控制选项，第二个选择控制选项将更改。 用户可以添加任意数量的项目。 在这里，它工作得很好。我面临的问题是，如果我添加了一个项目，并在选择控件中更改了一个选项，然后添加了一个新项目，那么新添加的项目也显示了以前选择的相同数据。 我知道这是数据绑定问题，但我不确定如何有效地解决这一问题，以便

无论何时添加新项目，都应显示默认的“选择”选项

如果每个项目中的数据发生变化，我应该能够跟踪这些数据

---

我在指令中加入了一个

将控制器附加到指令，并在指令控制器中根据每个指令处理itemOptions。您需要分别存储每个指令的状态，但不是-您正在存储父作用域上所有指令的状态。

我建议以下解决方案。可在以下网址找到工作示例： 下面是一个代码示例：

<div ng-controller="MyCtrl">
  <button ng-click=addItem()>add Item</button>
  <div ng-repeat="item in content">
    <my-directive category-options="categoryOptions" item-options="itemOptions" category-option-change="categoryOptionChange(selectedOption)" delete-item="deleteItem(index)" index={{index}}></my-directive>
  </div>
</div>

myApp.directive('myDirective', function() {
  return {
    scope: {
      categoryOptions: "=",
      deleteItem: "&",
      index: '@',
      itemOptions: "=",
      categoryOptionChange: "&"
    },
    restrict: 'AE',
    template: "<p>\r" +
      "\n" +
      "    <select ng-model=\"categoryOptions.selectedOption\" ng-options=\"option as option.name for option in categoryOptions\" ng-change=\"categoryOptionChange({selectedOption:categoryOptions.selectedOption})\">\r" +
      "\n" +
      "         <option value=\"\">choose</option>\r" +
      "\n" +
      "    </select> \r" +
      "\n" +
      "    <select ng-model=\"itemOptions.selectedOption\" ng-options=\"option as option.name for option in itemOptions\">\r" +
      "\n" +
      "        <option value=\"\">choose</option>\r" +
      "\n" +
      "    </select>\r" +
      "\n" +
      "     [<a href ng-click=\"deleteItem({index:index})\">X</a>]\r" +
      "\n" +
      "</p>\r" +
      "\n"

  }
});

希望这对你有帮助！：）

var app = angular.module('app', []);

app.controller("mainController", function($scope) {
  $scope.content = [];
  $scope.addSentence = function() {
    $scope.content.push({});
  };
  $scope.deleteItem = function(index) {
       $scope.content.splice(index, 1);
  };
  $scope.categoryOptions = [{
    name: "Books"
  }, {
    name: "Electronics"
  }];
  $scope.itemOptions = {
    books: [{
      name: "Harry Potter1"
    }, {
      name: "Harry Potter2"
    }, {
      name: "Harry Potter3"
    }],
    electronics: [{
      name: "Computer"
    }, {
      name: "Phone"
    }, {
      name: "Television"
    }]
  };
});

app.directive('myDirective', function() {
  return {
    scope: {
      categoryData: "=categoryOptions",
      deleteItem: "&",
      index: '@',
      itemData: "=itemOptions",
      categoryOptionChange: "&"
    },
    restrict: 'AE',
    templateUrl: "itemSelectTemplate.html",
    controller: function($scope) {
      $scope.itemOptions = [];
      $scope.categorySelectedOption = {};
      $scope.itemSelectedOption = {};
      $scope.categoryOptionChange = function(selectedOption) {
        if (selectedOption !== null) {
          switch (selectedOption.name) {
            case "Books":
              $scope.itemOptions = $scope.itemData.books;
              break;
            case "Electronics":
              $scope.itemOptions = $scope.itemData.electronics;
              break;
          }
        }
      }
    }
  }
});