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

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

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

Answer 3

正如@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
}

AngularJS在ng-repeat中传递函数

3 个答案: