Question

我有一个警报系统，用户需要能够创建无限数量的警报，并为每个警报添加无限数量的触发器。

例如，当我的汽车价格发生变化时，用户可能会收到一个名为＆＃34;的警报＆＃34;。他们需要能够为他们想要关注的每辆车创建相同类型的触发器（＆＃34;价格变动＆＃34;）。

以下是精简版本，仅处理触发器。

Here's a plunker - 只需按Add两次，您就会看到问题。

JS

// the array of trigger possibilities
$scope.triggerOptions = [
  {id : 0, type: 1, action: "Status Update For Brand"},
  {id : 1, type: 2, action: "Price Changed for "}
];

// the model for the select element
$scope.selected = $scope.triggerOptions[0];

// this array will hold all the triggers created
$scope.triggers = [];

// add some indexes to the new trigger object, then add it to triggers
$scope.addTrigger = function() {
  var newTrigger = $scope.selected;
  var newID = $scope.triggers.length;
  var alertID = 0; // todo: apply alert id
  newTrigger.triggerID = newID;
  newTrigger.alertID = alertID;
  $scope.triggers.push(newTrigger);
};

HTML

<select ng-options = "option.action for option in triggerOptions track by option.id" ng-model = "selected"></select>
<button ng-click="addTrigger()">Add</button>

<div ng-repeat="trigger in triggers track by triggerID" class="alert-tool-action-box">
  <div ng-show="trigger.type==1">
    <div>{{trigger.action}}</div>
  </div>

  <div ng-show="trigger.type==2">
    <div>{{trigger.action}}</div>
  </div>
</div>

问题

当我添加多个触发器时，只显示第一个触发器，但是我得到了一个＆＃34; dupes＆＃34; error message（建议我添加＆＃39;跟踪＃39;但我已经这样做了。）
当我连续添加两个相同类型的触发器时，triggerID会更新为两个触发器的新triggerID：

一个触发器：

[{"id":0,"type":1,"action":"Status Update For Brand","triggerID":0,"alertID":0}]

两个触发器：

[
  {"id":0,"type":1,"action":"Status Update For Brand","triggerID":1,"alertID":0},
  {"id":0,"type":1,"action":"Status Update For Brand","triggerID":1,"alertID":0}
]

我应该能够在添加它们时看到每个触发器，即使它们与之前的触发器相同。

Answer 1

您的对象数组不能包含重复项（错误：[ngRepeat：dupes]），现在这两个对象是相同的。这可以使用triggerID来解决，track by $index必须是唯一的，因此此处不能使用ng-repeat。如果没有可用的唯一属性，您始终可以使用{{1}}（由{{1}}指令提供）。

Answer 2

关于你的第二个问题，你总是推送同一个对象，因为你只有1个$ scope实例。要解决这个问题，您只需要克隆（或复制）$ scope.selected，如下所示：

＆＃13;

var newTrigger = angular.copy($scope.selected);

＆＃13;

希望它有所帮助！

Answer 3

你重复只显示你数组的一个表示，因为你跟踪不存在的triggerID（angular应该在$ scope上搜索它，并在每次调用时返回undefined）。调用triggerID的好方法是trigger.triggerID。所以：
```
 <div ng-repeat="trigger in triggers" class="alert-tool-action-box">
  ....
</div>
```
或者如果您想使用track by：
```
<div ng-repeat="trigger in triggers track by trigger.triggerID class="alert-tool-action-box">
  ....
</div>
```
您的第二个问题与javascript按引用而不是按值传递对象这一事实有关。您不创建新对象。你只需传递它并改变它的值。这就是为什么你拥有使用相同id更新的所有对象的原因。因此，您可以使用angular.copy()使其成为不同的对象。类似的东西：
```
 $scope.addTrigger = function() {
   var newTrigger = angular.copy($scope.selected);
   var newID = $scope.triggers.length;
   var alertID = 0; // todo: apply alert id
   newTrigger.triggerID = newID;
   newTrigger.alertID = alertID;
   $scope.triggers.push(newTrigger);
};
```

将新对象添加到数组

3 个答案: