使用Firebase数据过滤ng-repeat

时间:2016-02-22 23:26:07

标签: javascript angularjs firebase angularfire geofire

我有一组我重复的事件,它们已经可以通过搜索框进行过滤。

<div class="well well-sm" ng-repeat="allEvent in allEvents | filter:searchText | orderBy:sortOrder" ng-if="allEvent.event.name">
   <h3 id="cabynTitles">{{allEvent.event.name}}</h3>
   <h3 id="cabynMemNum">{{allEvent.event.time}} </h3>
   <button class="btn" ng-click="joinEvnt(allEvent.event.$id)">Join</button>
</div>

但是,我一直在尝试显示用户已经去过的事件。这些事件存储在firebase中。

.filter('myEvents', function () {
return function (items) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var ref = new Firebase(furl + "/users/" + auth.uid + "/events/");
      if (ref.child.equalTo(allEvent.event.$id) !== allEvent.event.$id) {
        filtered.push(item);
           } }
      return filtered;
   } }])

我认为它应该看起来像这样,但我无法将'allEvent.event。$ id'传递给过滤器(这是事件的firebase键)。任何帮助都会很棒,谢谢!

修改

目前的数据看起来像 -

myEvents:

"events": {
      "-KAw4iDuN2KdN-5pfQs0": true,  //Instead of true, I can also make this the uid
      "-KAw7Nn04WEoTDbatPn4": true
}

所有事件:我正在使用geofire,因此我在geoQuery函数期间返回每个事件,然后我获取所有事件详细信息。

"-KAw4iDuN2KdN-5pfQs0": {
        "name": "Event Name"
        "description": "Blah blah"
         ...
}

我现在意识到数据必须在重复之前进行过滤,因为我正在使用geoFire,我试图在geoQuery期间用这样的东西过滤它:

if (myEvents.indexOf(key) == -1) {
    //push evenDetails to array to show in scope
};

其中key是事件的uid,myEvents是来自上面的myEvents数据的firebaseArray。但我猜测indexOf对firebaseArrays不起作用?因为这不起作用。

1 个答案:

答案 0 :(得分:1)

你在这里遇到两个问题:

  1. Firebase can only query based on the presence of a value, not on the absence of a value
  2. Firebase can only query for a single value, not for multiple values
  3. 所以你的解决方案是:

    1. 加载完整的事件列表
    2. 加载用户要去的事件列表
    3. 循环#1并排除任何也在#2
    4. 的事件
    5. 将结果列表绑定到$scope
    6. 更新此代码段显示了如何使用您描述的JSON结构完成第3步。

      var myEvents = {
            "-KAw4iDuN2KdN-5pfQs0": true,
            "-KAw7Nn04WEoTDbatPn4": true
      };
      var allEvents = {
        "-KAw4iDuN2KdN-5pfQs0": {
              "name": "Event Name",
              "description": "Blah blah"
        },
        "-KAw7Nn04WEoTDbatPn4": {
              "name": "Event Name 2",
              "description": "Blah blah"
        },
        "-KAw7Nn04WEoTDbatl9": {
              "name": "Event Name 3",
              "description": "Blah blah"
        }
      };
      var filteredEvents = [];
      
      Object.keys(allEvents).forEach(function(eventKey) {
        if (Object.keys(myEvents).indexOf(eventKey) == -1) {
          filteredEvents.push(allEvents[eventKey]);
        }
      });
      
      document.getElementById('log').innerText = JSON.stringify(filteredEvents);
      <pre id='log'></pre>

      请注意,还有很多其他方法可以实现相同的目标。例如:Firebase快照已经有一个forEach()方法循环其子节点。您可以使用child.getKey()获取当前子快照的密钥。