Question

我遇到了与ng-init相关的奇怪行为，我们将不胜感激。

我有一个模型对象，它有一个flats属性，它是一个扁平对象数组。每个扁平物体都有房间属性，这是一系列房间物体。

我试图按照以下方式展示公寓和房间;

<table ng-repeat="flat in model.flats" ng-init="flatIndex = $index">
<thead>
<tr>
    <td>{{flatIndex+1}}. {{flat.name}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="room in flat.rooms" ng-init="roomIndex = $index">
    <td>{{roomIndex+1}}. {{room.name}}</td>
</tr>
</tbody>
</table>

如果我使用array.splice flatIndex和roomIndex变量删除公寓或房间，即使$index和ui正确更新，似乎也无法正确更新。

您可以看到问题here正在发挥作用。

尝试通过单击删除链接删除第1，第2或第3个单位或房间对象。从数组中删除最后一个对象并没有真正揭露问题。

任何变通办法也会受到赞赏。

Answer 1

当您使用ng-init时，这是一种已知行为，ng-init设置的范围属性值未被监视，并且当您从数组中删除项目以反映刷新的索引时它们不会更新位置。因此，请勿使用ng-init，而只需使用$index（deleteFlat($index)）和flat对象引用（以获取房间deleteRoom(flat,$index)）。< / p>

<table ng-repeat="flat in model.flats track by flat.id">
<thead>
    <tr>
        <td colspan="2">{{$index+1}}. {{flat.name}}</td>
        <td><a href="#" ng-click="deleteFlat($index)">DELETE FLAT</a></td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="room in flat.rooms  track by room.id">
        <td>&nbsp;</td>
        <td>{{$index+1}}. {{room.name}}</td>
        <td><a href="#" ng-click="deleteRoom(flat,$index)">DELETE ROOM</a></td>
    </tr>
</tbody>
</table>

和

$scope.deleteFlat = function(flatIndex){
    $scope.model.flats.splice(flatIndex,1);
};

$scope.deleteRoom = function(flat,roomIndex){
   flat.rooms.splice(roomIndex,1);
};

<强> Plnkr

或者最好使用ID本身deleteFlat(flat.id)和deleteRoom(room.id, flat)。

<table ng-repeat="flat in model.flats track by flat.id">
<thead>
    <tr>
        <td colspan="2">{{$index + 1}}. {{flat.name}}</td>
        <td><a href="#" ng-click="deleteFlat(flat.id)">DELETE FLAT</a></td>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="room in flat.rooms track by room.id">
        <td>&nbsp;</td>
        <td>{{$index+1}}. {{room.name}}</td>
        <td><a href="#" ng-click="deleteRoom(room.id, flat)">DELETE ROOM</a></td>
    </tr>
</tbody>
</table>

和

$scope.deleteFlat = function(flatId){
  $scope.model.flats.splice(_getItemIndex(flatId, $scope.model.flats), 1);
};

$scope.deleteRoom = function(roomId, flat){
  flat.rooms.splice(_getItemIndex(roomId, flat.rooms), 1);
};


function _getItemIndex(imtId, itms){
  var id ;
  itms.some(function(itm, idx){
      return (itm.id === imtId) && (id = idx)
   });
   return id;
}

<强> Plnkr2

ng-init在array.splice之后错误计算别名索引

1 个答案: