AngularJSの条件に基づいて、配列からアイテムを追加および削除する

私は動的な「お気に入り」トグルボタンを作成しようとしています。ボタンをクリックすると、選択したプレーヤーがユーザーのお気に入りリストに追加されます。プレイヤーがすでにお気に入りの場合は、それを削除する必要があります。AngularJSの条件に基づいて、配列からアイテムを追加および削除する

また、お気に入りを繰り返して、プレーヤーが既にお気に入りになっているかどうかを確認しようとしました。真の場合、それは好きな星の金に色を付けます。

ここにはいくつかの問題があります。チェックのための私のforループは、配列に1つの項目しか含まれていない限り正しく動作しているようです。しかし、私がもっと追加しようとするとすぐに、金色のアイコンはお気に入りに追加された最後のプレイヤーの唯一の金色です。だから、チェックは一度に1つのお気に入りを見つけるだけで、私は追加するプレイヤーを変える限り、私は何度もお気に入りにプレイヤーを追加することができます。

誰かが正しい方向で私を指摘し、私のループが正しく機能していない理由を理解できるように助けてくれれば、それは素晴らしいでしょう！

http://codepen.io/utrolig/pen/LNgRwv

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をチェックし、星をクリックすると、私はそれが理解しやすいだろうと思う！ –

あなたのコード内のエラーのカップルがあります。

最初は、あなたがコードを調べる場合は、existsフラグは各項目に更新されるためだけ最後アイテムが実際に、idと比較されていることがわかります、checkFavoriteです。ループを「短絡」し、値を見つけるとすぐに真を返す必要があります。

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

あなたがいる場合isFavorite関数は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) 
    } 
}

のようなもので終わるのコードを「減らす」場合あなたのトグルは、また非常に冗長ですリストが空です（最初のものは不要です）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。現在のケースでは、お気に入りのリストを2回ループしているので、さらに最適化することができます。 – Patrick

AngularJSの条件に基づいて、配列からアイテムを追加および削除する

答えて

関連する問題