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

删除＆＃34;跟踪$ index＆＃34;。它会起作用。

Answer 2

你可以用这个

数组“

中的

ng-repeat =”（索引，值）

Answer 3

ng-model内的ng-repeat指令违反规则：始终有一个点＆＃34; .＆＃34;在你的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指令省略点.时，模型会修改子作用域上的项而不是父作用域。

有关详细信息，请参阅AngularJS Wiki - The Nuances of Scope Prototypal Inheritance。

DEMO on JSFiddle

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

3 个答案: