ng-init은 array.splice 뒤에 앨리어싱 된 인덱스를 오산합니다.

Question

ng-init과 관련된 이상한 동작이 발생하여 도움을 얻을 수 있습니다.

플랫 개체의 배열 인 flats 속성을 가진 모델 개체가 있습니다. 각 평면 객체에는 room 객체의 배열 인 rooms 속성이 있습니다.

평면과 방을 다음과 같이 표시하려고합니다.

<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> 

내가 제대로 제대로 비록 $index 및 UI 업데이트를 업데이트하지 않는 것 array.spliceflatIndex 및 roomIndex 변수를 사용하여 평면이나 공간을 삭제하면

.

문제가 here 인 것을 볼 수 있습니다.

삭제 링크를 클릭하여 1, 2 또는 3 번째 플랫 또는 룸 오브젝트를 삭제하십시오. 배열에서 마지막 객체를 삭제해도 문제가 드러나지 않습니다.

해결 방법도 알려 주시면 감사하겠습니다.

Answer 1

ng-init을 사용할 때 알려진 동작으로 ng-init으로 설정된 범위 속성 값은 감시되지 않고 새로 고침 된 인덱스 위치를 반영하도록 배열에서 항목을 제거하면 업데이트되지 않습니다. ng-init을 사용하지 말고 $index (deleteFlat($index)) 및 flat 개체 참조 (deleteRoom(flat,$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>&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

또는 IDS 자체 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