如何在角度指令中從陣列中移除

Question

我有一些代碼正在向我的範圍中的數組添加和刪除條目。現在代碼不會被重用，而是被剪切/粘貼和調整。此外，它相當頑皮地使用範圍繼承來訪問數組。我試圖創建一個指令來解決這兩個問題。只要向數組添加條目，該指令就可以正常工作。只要我刪除一個條目，我似乎打破雙向綁定。任何線索我應該如何去做呢？

小提琴是here。

它顯示了舊的代碼的SkillsCtrl和新的ListEditCtrl（從小提琴下面再現）。將條目添加到任一列表將更新兩個列表，但從列表中刪除條目會中斷綁定。

function SkillsCtrl($scope) { 
    $scope.addSkill = function() { 
     $scope.profile.skills = $scope.profile.skills || []; 
     $scope.profile.skills.push($scope.newskill); 
     $scope.newskill = ""; 
    }; 

    $scope.removeSkill = function() { 
     $scope.profile.skills = _.without($scope.profile.skills, this.skill); 
    }; 
} 

function ListEditorCtrl($scope) { 
    $scope.addItem = function() { 
     $scope.list = $scope.list || []; 
     $scope.list.push($scope.newitem); 
     $scope.newitem = ""; 
    }; 

    $scope.removeItem = function() { 
     $scope.list = _.without($scope.list, this.item); 
    }; 
} 

Answer 1

這是因爲您使用http://underscorejs.org/#without，它創建數組的副本而不是僅刪除項目。當你刪除一個項目時，一個新的數組將被鏈接到該作用域，並且新的數組不會與隔離範圍中的數組鏈接。

爲了解決這個問題，你可以使用拼接代替，從原始數組中刪除的項目：

$scope.removeSkill = function() { 
    $scope.profile.skills.splice(_.indexOf($scope.profile.skills, this.skill),1); 
}; 

...

$scope.removeItem = function() { 
    $scope.list.splice(_.indexOf($scope.list, this.item),1); 
}; 

更新plunker：http://jsfiddle.net/jtjf2/