javascript - 对象的 Angular 数组，当按索引拼接时，它总是删除最后一个元素

Question

我有一些这样的 Controller :

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

删除“按 $index 跟踪”。它会起作用。