使用 Firebase 数据过滤 ng-repeat
Filter ng-repeat with Firebase Data
我有一组重复的事件,它们已经可以通过搜索框进行过滤。
<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 不起作用?因为这不起作用。
您遇到了两个问题:
- Firebase can only query based on the presence of a value, not on the absence of a value
所以你的解决方案是:
- 加载完整的事件列表
- 加载用户将要参加的活动列表
- 遍历 #1 并排除也在 #2 中的任何事件
- 将结果列表绑定到
$scope
更新 此代码段展示了如何使用您描述的 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()
.
获取当前子Snapshot的key
我有一组重复的事件,它们已经可以通过搜索框进行过滤。
<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 不起作用?因为这不起作用。
您遇到了两个问题:
- Firebase can only query based on the presence of a value, not on the absence of a value
所以你的解决方案是:
- 加载完整的事件列表
- 加载用户将要参加的活动列表
- 遍历 #1 并排除也在 #2 中的任何事件
- 将结果列表绑定到
$scope
更新 此代码段展示了如何使用您描述的 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()
.