Hinzufügen und Entfernen von Elementen aus Arrays, basierend auf einer Bedingung in AngularJS

Ich versuche, eine dynamische "Favoriten" Umschaltfläche zu machen. Wenn Sie auf die Schaltfläche klicken, sollte der ausgewählte Player zur Favoritenliste des Benutzers hinzugefügt werden. Wenn der Player bereits ausgewählt ist, sollte er entfernt werden.Hinzufügen und Entfernen von Elementen aus Arrays, basierend auf einer Bedingung in AngularJS

Ich habe auch versucht, durch die Favoriten zu iterieren, um zu überprüfen, ob ein Spieler bereits favorisiert ist. Wenn es stimmt, färbt es das Lieblingssterngold.

Ein paar Probleme hier. Meine for-Schleife für die Überprüfung scheint ordnungsgemäß zu funktionieren, solange das Array nur ein Element enthält. Aber sobald ich versuche, mehr hinzuzufügen, ist das goldene Symbol nur goldfarben auf dem letzten Spieler, der zu den Favoriten hinzugefügt wurde. Der Scheck findet also immer nur einen Favoriten, und ich kann oft einen Spieler zu den Favoriten hinzufügen, solange ich die hinzugefügten Spieler verändere.

Wenn mir jemand in die richtige Richtung zeigen könnte und mir helfen würde zu verstehen, warum meine Schleife nicht richtig funktioniert, wäre das großartig!

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>

Quelle

2016-04-28 Stian Bakken

Bitte näher auf "alles bricht". Was ist das erwartete Verhalten und was ist das tatsächliche Verhalten? – Patrick

Hat meinen Beitrag bearbeitet. Wenn Sie den Codepen überprüfen und klicken Sie auf die Sterne, ich denke, es wäre einfacher zu verstehen! –

Es gibt ein paar Fehler im Code.

Die erste ist checkFavorite, wenn Sie den Code untersuchen Sie sehen, dass nur die letzte Artikel tatsächlich zu id verglichen wird, da die exists Flag für jedes Element aktualisiert wird. Sie müssen die Schleife "kurzschließen" und True zurückgeben, sobald Sie einen Wert gefunden haben.

btw, is* ist eine gebräuchliche Namenskonvention zur Überprüfung boolescher Werte.

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

Ihre Toggle sind auch sehr ausführlich, wenn Sie „reduce“ der Code, den Sie am Ende mit etwas wie diese

$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) 
    } 
}

Diese weiter bearbeitet werden kann, da die isFavorite Funktion falsch zurück, wenn die Liste ist leer, dh keine Notwendigkeit für die erste 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) 
    } 
}

Quelle

2016-04-28 09:38:36 Patrick

Vielen Dank! Scheint, dass ich zurück zu den Grundlagen gehen muss, bevor ich mit meinen Winkelfähigkeiten fortfahre. –

@StianBakken; np. Denken Sie daran, dass Sie es weiter optimieren können, da Sie im aktuellen Fall die Liste der Favoriten zweimal durchlaufen. – Patrick

Hinzufügen und Entfernen von Elementen aus Arrays, basierend auf einer Bedingung in AngularJS

Antwort

Verwandte Themen