根據AngularJS中的條件添加和刪除陣列中的項目

我試圖製作一個動態的「收藏」切換按鈕。單擊按鈕時，它應該將選定的播放器添加到用戶收藏夾列表中。如果玩家已經被收藏，應該將其移除。根據AngularJS中的條件添加和刪除陣列中的項目

我也嘗試遍歷收藏夾，以檢查玩家是否已經被收藏。如果這是真的，它會爲喜愛的明星黃金添色。

這裏有一些問題。只要數組只包含一個項目，我的for循環進行檢查似乎正常工作。但只要我嘗試添加更多，黃金圖標只會添加到收藏夾中的最後一位玩家上。因此，支票一次只能找到一個最愛，而且我可以多次添加一個球員到最愛，只要我改變我添加的球員。

如果有人能指引我正確的方向，並幫助我理解爲什麼我的循環無法正常工作，那將是太棒了！

的Javascript

angular.module('test', []) 

    .controller('TestController', function($scope){ 
    $scope.players = [ 
     { 
     uniqueid: "gem", 
     name: "Ole Christian", 
     cake: false, 
     },{ 
     uniqueid: "utrolig", 
     name: "Stian", 
     cake: false, 
     },{ 
     uniqueid: "drozo", 
     name: "Adrian", 
     cake: false, 
     } 
    ]; 

    $scope.user = { 
     name: "Stian", 
     username: "stiba", 
     favorites: [{uniqueid: "drozo"}], 
    } 

    $scope.checkFavorite = function(id){ 
     fav = $scope.user.favorites; 
     var exists; 
     for (var i=0; i < fav.length; i++){ 
     if(fav[i].uniqueid == id){ 
      exists = true; 
     } else { 
      exists = false; 
     } 
     } 
     return exists; 
    } 

    $scope.toggleFavorite = function(id){ 
     fav = $scope.user.favorites; 
     if(fav.length === 0){ 
     var newfav = {uniqueid: id}; 
     fav.push(newfav); 
     } else { 
     if($scope.checkFavorite(id) === true){ 
      for(var i = 0; i < fav.length; i++){ 
      if (fav[i].uniqueid === id) fav.splice(i, 1); 
      } 
     } else if ($scope.checkFavorite(id) === false) { 
      var newfav = {uniqueid: id}; 
      fav.push(newfav) 
     } else { 
      console.log('Error!'); 
     } 
     } 
    } 

    $scope.isFavorited = function(){ 
     return true; 
    }; 

    })

HTML

<body ng-app="test"> 
    <div class="container" ng-controller="TestController"> 
    <h3>Players</h3> 
    <div ng-repeat="player in players" class="player-cont"> 
     <div class="player"> 
     <div class="favorite" ng-click="toggleFavorite(player.uniqueid)" ng-class="{'active': checkFavorite(player.uniqueid)}"> 
      <i class="material-icons">star</i> 
     </div> 
     <i class="material-icons player-icon">person</i> 
     </div> 
     <div> 
     <p ng-bind="player.uniqueid"></p> 
     <p ng-bind="player.name"></p> 
     </div> 
    </div> 
    <h3>Favorites</h3> 
    <div ng-repeat="favorite in user.favorites track by $index"> 
     <h5>{{favorite.uniqueid}}</h5> 
    </div> 
    <p class="user"> 
    {{user.favorites}} 
    </p> 
    </div> 

</body>

來源

2016-04-28 Stian Bakken

請詳細說明「一切都中斷」。預期的行爲是什麼？實際行爲是什麼？ – Patrick

編輯我的帖子。如果你檢查codepen並點擊，明星，我認爲這會更容易理解！ –

有一個在你的代碼一對夫婦的錯誤。

首先是checkFavorite，如果檢查的代碼，你會看到只有最後項目卻比id，因爲exists標誌爲每個產品的更新。您需要將環路「短路」並在您找到值時立即返回true。

btw，is*是檢查布爾值的通用名稱約定。

$scope.isFavorite = function(id){ 
    var fav = $scope.user.favorites; 
    for (var i=0; i < fav.length; i++){ 
    if(fav[i].uniqueid == id){ 
     return true; 
    } 
    } 
    return false; 
}

你切換也很繁瑣，如果你「減少」如果你最終像這樣

$scope.toggleFavorite = function(id){ 
    var fav = $scope.user.favorites; 
    // no previous items, remove, OK 
    if(fav.length === 0) { 
    var newfav = {uniqueid: id}; 
    fav.push(newfav); 
    return; 
    } 

    // if already a favorite, uncheck/remove 
    if($scope.isFavorite(id)) { 
    for(var i = 0; i < fav.length; i++){ 
     if (fav[i].uniqueid === id) fav.splice(i, 1); 
    } 
    } 
    // otherwise add the item 
    // remember, isFavorite returns true of false, there is no third state 
    else { // if ($scope.isFavorite(id) === false) { 
    var newfav = {uniqueid: id}; 
    fav.push(newfav) 
    } 
}

這可以進一步編輯的代碼，因爲isFavorite函數將返回false清單是空的，即沒有第一個需要if

$scope.toggleFavorite = function(id){ 
    var fav = $scope.user.favorites; 
    // if already a favorite, uncheck/remove 
    if($scope.isFavorite(id)) { 
    for(var i = 0; i < fav.length; i++){ 
     if (fav[i].uniqueid === id) { 
     fav.splice(i, 1); 
     // unless the item exists more than once, break the loop 
     break; 
     } 
    } 
    } 
    // otherwise add the item 
    else { 
    var newfav = {uniqueid: id}; 
    fav.push(newfav) 
    } 
}

來源

2016-04-28 09:38:36 Patrick

非常感謝你！似乎我需要回到基礎知識，繼續我的角度技能.. –

@StianBakken; NP。請記住，您可以進一步優化它，因爲在當前情況下，您正在循環兩次收藏夾列表。 – Patrick

根據AngularJS中的條件添加和刪除陣列中的項目

回答

相關問題