AngularJS Passer une fonction dans ng-repeat

Question

Bonjour Je construis une application en utilisant Firebase et AngularJS. J'ai deux parents, un contenant chaque monstre dans le jeu, et un autre contenant tous les monstres que l'utilisateur a.

J'ai besoin d'un répéteur qui vide les monstres de l'utilisateur, et affiche tout le reste. J'ai essayé plusieurs méthodes, et je sens qu'en utilisant une directive, je suis très proche de quelque chose de logique.

index.html:

<div ng-repeat="monster in monsters" my-directive="monster"> 
    <h2>{{monster.name}}</h2> 
</div> 

services.js

.directive('myDirective', function(Auth, $firebaseArray){ 
    rdef ='' 

    Auth.$onAuth(function(authData) { 
    var username = authData.uid; 

    var ref = new Firebase("firebaseurl"); 
    var hopref = ref.child(username); 

    var results = $firebaseArray(hopref); 

    results.$loaded(function(x) { 
    angular.forEach(results, function(value, key){ 
     if(myDirective.name == value.Monster){ 
     rdef ='<div></div>' 
     }else{ 
     rdef ='<div>{{ myDirective.name }}</div>' 
     } 
    }); 
    }); 
}); 

return { 
    restrict: "A", 
    template: rdef , 
    scope: { 
    myDirective: '=' 
    }, 
    link: function(scope, element, attrs) { 
    console.log('MyData', scope.myDirective); 
    } 
}; 

}); 

Je suis tout à fait nouveau à angulaire, et toute aide serait très appréciée. (Je suis aussi nouveau à Stackoverflow donc si je fais quelque chose de mal, s'il vous plaît faites le moi savoir)

Merci !!!

Answer 1

Comme suggéré @Baltic, vous pouvez le faire en utilisant ng-cache:

À votre avis:

<div ng-repeat="monster in monsters"> 
    <h2 ng-hide="isUserMonster(monster.name)">{{monster.name}}</h2> 
</div> 

Dans votre countroller écrire votre logique pour vérifier si la l'utilisateur a le monstre:

$scope.isUserMonster(monsterName) 
{ 
    //your logic goes here 
    //you will probably access your database to check monster existance with the user here 
} 

Answer 2

Je crois que vous pourriez réaliser cela d'une manière plus simple, sans utiliser de directives personnalisées. Je suppose que vous avez des propriétés dans votre JSON qui déterminent si un monstre appartient à l'utilisateur. ng-hide masque un élément basé sur une expression que vous fournissez. Peut-être essayer ceci:

<div ng-repeat="monster in monsters"> 
    <h2 ng-hide="monster.isUser">{{monster.name}}</h2> 
</div> 

Answer 3

la bonne façon d'exclure les objets de votre ng-repeat est usin g un filtre. Vous ne avez pas inclus la façon dont vos objets ressemblent, alors je vous donne un exemple simple:

app.controller("myCtrl", function($scope) { 
    // assuming your data looks something like this: 
    $scope.user = { 
     monsters: ["Monster1", "Monster5", "Monster6"] 
    } 
    $scope.monsters = [{ 
     name: "Monster1" 
    }, { 
     name: "Monster2" 
    }, { 
    // etc. 
    } 
}); 

// filter 
app.filter("notInUser", function() { 
    return function(monsters, user) { 
     return monsters.filter(function(monster) { 
      return user.monsters.indexOf(monster) === -1; 
     }); 
    } 
}); 

Ensuite, vous pouvez utiliser le filtre comme ceci:

<div ng-repeat="monster in monsters | notInUser:user"> 
    <h2>{{monster.name}}</h2> 
</div> 

Voir this working jsfiddle