複製上次要添加到同一陣列的數組對象

Question

我希望這很簡單。我試圖再次將數組中的最後一個對象添加到數組中。

像這樣：

arr = [1, 2] 

result = [1, 2, 2] 

只需使用此代碼來代替：

$scope.template = { 
     ressource: { 
      level: [{ 
       gain: [], 
       cost: [] 
      }] 
     } 
    }; 

    $scope.addLevel = function() { 
     var last = $scope.template.ressource.level[$scope.template.ressource.level.length - 1]; 
     $scope.template.ressource.level.push(last); 
    }; 

但是我得到這個錯誤：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: level in template.ressource.level, Duplicate key: object:51, Duplicate value: {"gain":[],"cost":[]}

---

編輯

所以我嘗試了track by但我似乎並沒有越來越新的東西所以這裏是我的代碼HTML部分，我用gain和cost值：

  <div ng-show="template.type === 'building'" class="vertical-spacing"> 
      <label>Ressource gain per level</label> 

      <ul class="list-group"> 
       <li ng-repeat="level in template.ressource.level track by $id(level)" 
        class="list-group-item" 
        ng-hide="template.ressource.level.indexOf(level) === 0"> 
        <span> 
         Level: {{ template.ressource.level.indexOf(level) }} 
        </span> 

        <span class="pull-right"> 
         <a href="" ng-click="removeLevel(level)"> 
          <span class="glyphicon glyphicon-remove"></span> 
         </a> 
        </span> 

        <ul> 
         <li class="list-group-item" ng-repeat="gain in level.gain track by $id(gain)"> 
          <div class="form-inline"> 
           <div class="form-group"> 
            <label>Amount</label> 
            <input type="number" 
              class="form-control" 
              ng-model="gain.amount" 
              min="1" 
              required> 
           </div> 

           <div class="form-group"> 
            <label>Ressource</label> 
            <select required 
              ng-model="gain.ressource" 
              ng-init="gain.ressource = gain.ressource || ressources.basic[0]" 
              ng-options="ressource._id as ressource.name | capitalize for ressource in ressources.basic" 
              class="form-control selectWidth"> 
             <option style="display:none" value="" disabled>select a ressource</option> 
            </select> 
           </div> 

           <span class="pull-right"> 
            <a href="" ng-click="removeGain(level, gain)"> 
             <span class="glyphicon glyphicon-remove"></span> 
            </a> 
           </span> 
          </div> 
         </li> 
        </ul> 

        <span> 
         <a href="" ng-click="addGain(level)" ng-hide="(level.gain.length + 1) > ressources.basic.length"> 
          <span class="glyphicon glyphicon-plus"></span> Add ressource 
         </a> 
        </span> 
       </li> 
      </ul> 

      <span> 
       <a href="" ng-click="addLevel()"> 
        <span class="glyphicon glyphicon-plus"></span> Add level 
       </a> 
      </span> 
     </div> 

     <div ng-show="template.type === 'building'" class="vertical-spacing"> 
      <label>Ressource cost per level</label> 

      <ul class="list-group"> 
       <li ng-repeat="level in template.ressource.level track by $id(level)" 
        class="list-group-item" 
        ng-hide="template.ressource.level.indexOf(level) === 0"> 
        <span> 
         Level: {{ template.ressource.level.indexOf(level) }} 
        </span> 

        <span class="pull-right"> 
         <a href="" ng-click="removeLevel(level)"> 
          <span class="glyphicon glyphicon-remove"></span> 
         </a> 
        </span> 

        <ul> 
         <li class="list-group-item" ng-repeat="cost in level.cost track by $id(cost)"> 
          <div class="form-inline"> 
           <div class="form-group"> 
            <label>Amount</label> 
            <input type="number" 
              class="form-control" 
              ng-model="cost.amount" 
              min="1" 
              required> 
           </div> 

           <div class="form-group"> 
            <label>Ressource</label> 
            <select required 
              ng-model="cost.ressource" 
              ng-init="cost.ressource = cost.ressource || ressources.categories[0]" 
              ng-options="ressource._id as ressource.name | capitalize for ressource in ressources.categories" 
              class="form-control selectWidth"> 
             <option style="display:none" value="" disabled>select a ressource</option> 
            </select> 
           </div> 

           <span class="pull-right"> 
            <a href="" ng-click="removeCost(level, cost)"> 
             <span class="glyphicon glyphicon-remove"></span> 
            </a> 
           </span> 
          </div> 
         </li> 
        </ul> 

        <span> 
         <a href="" ng-click="addCost(level)" ng-hide="(level.cost.length + 1) > ressources.categories.length"> 
          <span class="glyphicon glyphicon-plus"></span> Add ressource 
         </a> 
        </span> 
       </li> 
      </ul> 

      <span> 
       <a href="" ng-click="addLevel()"> 
        <span class="glyphicon glyphicon-plus"></span> Add level 
       </a> 
      </span> 
     </div> 

錯誤現在狀態：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: level in template.ressource.level track by $id(level), Duplicate key: object:51, Duplicate value: {"gain":[],"cost":[]}

Answer 1

您有一個角度誤差。在ng-repeat中使用track by。

<div ng-repeat="n in template.ressource.level track by $index"> 

---

參考

• https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

By default, ngRepeat does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.

If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.