【问题标题】:Filter ng-repeat with Firebase Data使用 Firebase 数据过滤 ng-repeat
【发布时间】:2016-06-04 14:30:30
【问题描述】:

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

<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 键)。任何帮助都会很棒,谢谢!

编辑

当前数据看起来像-

我的事件:

"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 上不起作用?因为这行不通。

【问题讨论】:

    标签: javascript angularjs firebase angularfire geofire


    【解决方案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

    所以你的解决方案是:

    1. 加载完整的事件列表
    2. 加载用户将要参加的活动列表
    3. 遍历 #1 并排除也在 #2 中的任何事件
    4. 将结果列表绑定到$scope

    更新此 sn-p 显示如何使用您描述的 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);
    &lt;pre id='log'&gt;&lt;/pre&gt;

    请注意,还有许多其他方法可以实现相同的目的。例如:一个 Firebase 快照,已经有一个循环其子级的 forEach() 方法。并且可以通过child.getKey()获取当前子快照的key。

    【讨论】:

    • 听起来不错。加载它们是没有问题的,我有 allEvents 和 myEvents,但是我如何执行第 3 步呢?我一直在尝试诸如 myEvents.indexOf("Key of a single allEvent") 之类的东西,但这似乎不起作用。
    • 这取决于您在全局列表和用户列表中存储的有关事件的内容。如果您在您的问题中添加 JSON 数据的代表性 sn-p(请提供文本,不要截图)会有所帮助。
    • 感谢弗兰克的帮助,我添加了数据。我正在使用 geoFire,所以理想情况下,我会尝试在 geoQuery 函数期间确定事件是否与 myEvent 匹配。
    • 鉴于我上面的食谱,您应该能够比您现在的问题更接近。第 1 步和第 2 步是您的,然后在第 3 步中比较密钥。如果这是一个问题,请使用您拥有的 sn-p 更新您的问题。
    • 嘿弗兰克,我刚刚更新了它,因为你正在评论我正在使用的 sn-p。抱歉,我无法破解这个...
    猜你喜欢
    • 2017-03-22
    • 1970-01-01
    • 1970-01-01
    • 2015-08-21
    • 1970-01-01
    • 1970-01-01
    • 2014-08-08
    • 2017-05-18
    • 2020-02-05
    相关资源
    最近更新 更多