AngularJS 在 ng-repeat 中传递函数

Question

您好，我正在使用 Firebase 和 AngularJS 构建应用程序。 我有两个父母，一个包含游戏中的每个怪物，另一个包含用户拥有的每个怪物。

我需要一个中继器来消除用户怪物，并显示其他所有内容。我尝试了很多方法，我觉得使用指令我非常接近逻辑。

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

});

我对 Angular 还是很陌生，任何帮助都将不胜感激。 （我也是 Stackoverflow 的新手，所以如果我做错了什么，请告诉我）

谢谢！！！

Answer 1

从ng-repeat 中排除对象的正确方法是使用过滤器。你没有包括你的对象的样子，所以我给你一个简单的例子：

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

然后你可以像这样使用过滤器：

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

见this working jsfiddle

Answer 2

正如@Baltic 建议的那样，您可以使用 ng-hide 来做到这一点：

在你看来：

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

在你的计数器中写下你的逻辑来检查用户是否有怪物：

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

Answer 3

我相信您可以通过更简单的方式实现这一目标，而无需使用自定义指令。我假设您的 JSON 中有属性可以确定怪物是否属于用户。 ng-hide 根据您提供的表达式隐藏元素。也许试试这个：

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