將新對象添加到陣列時出現角度陣列重複錯誤

Question

我有一個警報系統，用戶需要能夠創建無限數量的警報，併爲每個警報添加無限數量的觸發器。

例如，用戶可能會有一個名爲「當我的汽車價格變化時」的警報。他們需要能夠爲他們想要遵循的每輛車創建相同類型的觸發器（「價格變化」）。

接下來是一個精簡版，只處理觸發器。

​​- 只需按兩次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> 

問題

• 當我添加多個觸發器，只顯示第一個觸發器，但我得到一個「傻瓜」error message（這表明我添加了'追蹤'，但我已經這樣做了）。
• 當我連續添加兩個相同類型的觸發器，該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

• 你NG重複只顯示一個您陣列的representant因爲你通過triggerID跟蹤不存在（角應搜索它在$範圍和不確定的每一次它稱之爲返回）。調用triggerID的好方法是trigger.triggerID。所以：

  <div ng-repeat="trigger in triggers" class="alert-tool-action-box"> 
      .... 
  </div> 
  

  ，或者如果你想使用的軌道：

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

Answer 2

您的對象數組不能包含重複項（錯誤：[ngRepeat：dupes]），現在這兩個對象是相等的。這可以使用track by來解決，它必須是唯一的，所以triggerID不能在這裏使用。如果沒有可用的唯一屬性，則始終可以使用track by $index（由ng-repeat指令提供）。

Answer 3

關於你的第二個問題，你總是把相同的對象，因爲你只有$範圍的1個實例。 爲了解決這個問題，你只需要克隆（或複製）$ scope.selected，像這樣：

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

希望它能幫助！