角度配列、インデックスによるスプライシングが、それは常に最後の要素

Question

を削除したときに、私はこのようないくつかのコントローラがあります。ここでは

app.controller("zipController", function($scope, $http, $rootScope, $timeout) { 
    $scope.zipCodes = []; 
    $scope.addZipCode = function() { 
    $scope.zipCodes.push({code: '', distance: '25mi'}); 
    } 
    $scope.removeZipCode = function(index) { 
    console.log(index, 'index removing'); 
    $scope.zipCodes.splice(index, 1); 
    } 
}); 

app.controller("zipCodeController", function($scope, $http, $rootScope, $timeout) { 

}); 

はHTMLです：

<label ng-click="addZipCodes=!addZipCodes; addZipCode();"><i class="fa fa-map-marker" aria-hidden="true"></i> Target Zip Codes <small>(Cities)</small></label> 
<span ng-if="addZipCodes" style="white-space: normal;"> 
    <span ng-repeat="code in zipCodes track by $index" class="zipCodeInput" ng-controller="zipCodeController"> 
     <span class="zipCodeText"> 
      <input type="text" placeholder="Zip Code" ng-model="zipCode" class="zipCode"> 
     </span> 
     <span class="zipCodeSelect"> 
      <select ng-model="zipCodeDistance" ng-value="code.distance" class="zipCodeDistance"> 
       <option value="25mi">25 miles</option> 
       <option value="50mi">50 miles</option> 
       <option value="100mi">100 miles</option> 
      </select> 
     </span> 
     <span class="zipCodeRemove"> 
      {{$index}} 
      <a ng-click="removeZipCode($index)">x</a> 
     </span> 
    </span> 
    <label ng-click="addZipCode();" class="addZipCode"><i class="fa fa-plus-square" aria-hidden="true"></i> Add</label> 
</span> 

私はremoveZipCode($index)機能を呼び出すと正しいインデックスを持っていますが、常に正しい郵便番号インデックスではなく、最後の$scope.zipCodesが配列から削除されます。

なぜでしょうか？

Answer 1

「track by $ index」を削除します。それが動作します。

Answer 2

あなたはng-repeat内部ng-modelディレクティブはルールを破っている「配列で（インデックス、値）」

Answer 3

をこの

NG・リピートを=使用することができますは常にあなたの中ドット「.」を持っていますNG-モデル

<span ng-if="addZipCodes" style="white-space: normal;"> 
    <span ng-repeat="item in zipCodes track by $index" class="zipCodeInput" ng-controller="zipCodeController"> 
     <span class="zipCodeText"> 
      <!-- REMOVE 
      <input type="text" placeholder="Zip Code" ng-model="zipCode" class="zipCode"> 
      --> 
      <!-- always have a dot in your ng-model --> 
      <input type="text" placeholder="Zip Code" ng-model="item.code" class="zipCode"> 
     </span> 
     <span class="zipCodeSelect"> 
      <!-- REMOVE 
      <select ng-model="zipCodeDistance" ng-value="code.distance" class="zipCodeDistance"> 
      --> 
      <!-- always have a dot in your ng-model --> 
      <select ng-model="item.distance" ng-value="item.distance" class="zipCodeDistance"> 
       <option value="25mi">25 miles</option> 
       <option value="50mi">50 miles</option> 
       <option value="100mi">100 miles</option> 
      </select> 
     </span> 
     <span class="zipCodeRemove"> 
      {{$index}} 
      <a ng-click="removeZipCode($index)">x</a> 
     </span> 
    </span> 
    <label ng-click="addZipCode();" class="addZipCode"><i class="fa fa-plus-square" aria-hidden="true"></i> Add</label> 
</span> 

ng-repeatディレクティブはng-modelディレクティブはDOを省略したときに、各項目の子スコープを作成するためt .の場合、モデルは親スコープではなく子スコープ上の項目を変更します。

詳細については、AngularJS Wiki - The Nuances of Scope Prototypal Inheritanceを参照してください。

DEMO on JSFiddle