接頭從NG-重複在AngularJS

去除錯了對象

我列出名稱的數組在我看來是這樣的：接頭從NG-重複在AngularJS

<div class="checkbox col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'"> 
    <div class="checkboxinner"> 

    <button class="btn btn-staff form-control" 
      ng-show="!staff.chosen" 
      ng-click="pushStaff(staff)"> 
       {{staff.name}} 
    </button> // visible when unselected, invisible when selected 

    <button class="btn btn-primary form-control" 
      ng-show="staff.chosen" 
      ng-click="unpushStaff(staff, $index)"> 
       {{staff.name}} 
    </button> // visible when selected, invisible when unselected 

    </div> 
</div>

的第一個按鈕觸發此功能，增添的對象放入數組和被替換與另一個按鈕（不同的顏色，相同的內容），應該作爲一個切換。這個功能完美運作。

$scope.paxlist = []; 

$scope.pushStaff = function (staff) { 
    staff.chosen = true; 

    $scope.paxlist.push(
     { 
      name: staff.name 
     } 
    ); 
    console.log($scope.paxlist); 
};

基本上，當我單擊我添加對象，當我再次單擊時，我將其刪除。這裏的刪除功能：

$scope.unpushStaff = function (staff, $index) { 
    staff.chosen = false; 

    var index=$scope.paxlist.indexOf(staff) 
    $scope.paxlist.splice(index,1); 

    console.log($scope.paxlist); 
}

我的問題是，unpushStaff（）確實會刪除項目，而不是我點擊刪除的項目，但一個又一個。

我錯過了什麼？

也許ng表演搞亂了$ index？

來源

2014-12-01 Eric Mitjans

我看到控制器中的'paxlist'和模板中的'stafflist'。 2之間的連接是什麼？ – deitch 2014-12-01 18:31:35

@deitch在模板中，我列出了來自stafflist的所有項目，然後我希望能夠選擇其中的一些並將它們添加到另一個數組（paxlist）。 – 2014-12-01 18:35:50

哦，所以模板是從stafflist中選取並從一個單獨的paxlist中添加/刪除？當你執行'unpushStaff（）'時，你看到了什麼？哪個項目被刪除？ – deitch 2014-12-01 18:36:59

您的staff條目stafflist與paxlist中的條目不完全相同。根據您在下面的模板：

<button class="btn btn-staff form-control" 
     ng-show="!staff.chosen" 
     ng-click="pushStaff(staff)"> 
      {{staff.name}} 
    </button> // visible when unselected, invisible when selected

很顯然，在stafflist每個staff條目是某種對象，它至少有一個屬性name和另一chosen。

當你推到paxlist，你正在創建一個新的對象，看起來像：

$scope.paxlist.push(
    { 
     name: staff.name 
    } 
);

這是好的。但是，當你再來找刪除它，你被尋找它：

var index=$scope.paxlist.indexOf(staff)

其中staff是對象在stafflist！當然，該對象在paxlist中不存在 - 您在paxlist.push()之上導出的單獨對象是 - 因此indexOf()返回-1，從而導致splice()刪除paxlist上的最後一個項目。

來源

2014-12-01 18:41:19 deitch

我實際上已經開始朝相同的方向思考了。但我該如何解決？ – 2014-12-01 18:42:41

一堆方法。最簡單的可能是將實際的對象'staff'推到paxlist上。如果它是實際的對象（不是另一個對象的屬性碰巧匹配），那麼'indexOf'將起作用。否則你需要逐個搜索它（這是所有的indexOf無論如何）。在lodash中有一些很好的工具 – deitch 2014-12-01 18:46:22

這樣的答案是那些讓我實際學到的東西：） – 2014-12-01 18:51:34

接頭從NG-重複在AngularJS

回答

相關問題