Arrays ng init在array.splice之后错误计算别名索引
我遇到了一个与ng init相关的奇怪行为,如有任何帮助,将不胜感激 我有一个模型对象,它有一个平面属性,它是一个平面对象数组。每个平面对象都具有rooms属性,该属性是房间对象的数组 我试着展示公寓和房间,如下所示Arrays ng init在array.splice之后错误计算别名索引,arrays,angularjs,angularjs-ng-repeat,ng-repeat,angularjs-ng-init,Arrays,Angularjs,Angularjs Ng Repeat,Ng Repeat,Angularjs Ng Init,我遇到了一个与ng init相关的奇怪行为,如有任何帮助,将不胜感激 我有一个模型对象,它有一个平面属性,它是一个平面对象数组。每个平面对象都具有rooms属性,该属性是房间对象的数组 我试着展示公寓和房间,如下所示 <table ng-repeat="flat in model.flats" ng-init="flatIndex = $index"> <thead> <tr> <td>{{flatIndex+1}}. {{flat.nam
<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>
{{flatIndex+1}}。{{flat.name}
{{roomIndex+1}}。{{room.name}
如果使用array.splice
flatIndex
和roomIndex
删除公寓或房间,即使$index
和ui正确更新,变量似乎也无法正确更新
你可以在行动中看到问题
单击“删除”链接,尝试删除第一个、第二个或第三个公寓或房间对象。从数组中删除最后一个对象并不会真正暴露问题
如果您使用
ng init
,这是一种已知的行为,ng init
设置的作用域属性值不会被监视,并且当您从数组中删除项以反映刷新的索引位置时,它们不会更新。因此,不要使用ng init
,而只需使用$index
(deleteFlat($index)
)和flat
对象引用(以获得房间deleteRoom(flat,$index)
)
或者最好使用ids本身,deleteFlat(flat.id)
和deleteRoom(room.id,flat)
您也可以使用for循环。我不知道不监视ng init变量。但我应该猜到:)谢谢你的回答。干杯。@ysf不客气。:)。不仅如此,在使用过滤器时也可能出现类似的问题。。所以最好不要依赖
$index
,尤其是当您有标识符时:)
<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> </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);
};
<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> </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;
}