AngularJS Passing a Function in ng-repeat

Question

Hello I am building an app using Firebase and AngularJS. I have two parents, one containing every monster in the game, and another containing every monster the user has.

I need a repeater that blanks out the users monsters, and displays everything else. I have tried many methods, and I feel using a directive I am very close to something logical.

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

});

I am quite new to Angular, and any help would be very much appreciated. (I am also new to Stackoverflow so if im doing something wrong, please let me know)

Thank you!!!

devqon · Answer 1 · 2017-02-03T11:24:42.847

The proper way to exclude objects from your ng-repeat is using a filter. You did not include how your objects look like, so I am giving you a simple example:

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

Then you can use the filter like this:

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

See this working jsfiddle

score 1 · Answer 2 · answered Feb 03 '17 at 09:11

1

I believe you could achieve that in a simpler way, without using custom directives. I presume you have properties in your JSON that determine if a monster belongs to the user. ng-hide hides an element based on an expression you provide. Maybe try this:

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

answered Feb 03 '17 at 09:11

Baltic

56
3

Hello, thank you very much for this. The way my database works is that when a users 'catches' a monster it shuffles through the 'Monster' database and adds it into the 'UserMonsters' database. To me this seems a lot more minimal then having every user saved under every monster? Or am I going about it the wrong way? – William Fischer Feb 03 '17 at 09:16
I would recommend creating a simple array that contains only monsters that user hasn't caught. On 'catching' a monster, push to that array only, and use `ng-repeat` to show only those monsters in your view. All that could be achieved in your controller, without modifying the database. – Baltic Feb 03 '17 at 09:26

score 1 · Accepted Answer · answered Feb 03 '17 at 10:34

As @Baltic suggested, you can do this using ng-hide:

In your view:

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

In your countroller write your logic to check if the user has the monster:

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

AngularJS Passing a Function in ng-repeat

3 Answers3