显示有序 Firebase 数组的特殊情况（使用 AngularJS）答案

【问题标题】：Displaying Special Case Of Sorted Firebase Arrays (with AngularJS)显示有序 Firebase 数组的特殊情况（使用 AngularJS）
【发布时间】：2016-05-18 16:38:21
【问题描述】：

所以基本上我有一组俱乐部和一组用户。每个俱乐部和每个用户都有特定的纬度和经度。使用 ng-repeat 向用户显示所有俱乐部很容易，但我试图只显示每个用户一定距离内的俱乐部。所以到目前为止我想出了什么：

var arr = [];
$scope.clubs.$loaded().then(function() {
    angular.forEach($scope.clubs, function(value, key) {
       if($scope.getDistance(value.lng, value.lat) == true) {
        console.log(value.name + " it's close enough!");
         arr.push( {id: value.$id, description: value.description, name: value.name});
       }
    });
    console.log(arr);
});
$scope.narr = arr;

有没有更优雅的方法来做到这一点？我基本上是从firebase数组中挑选出数据，然后将其放入一个较小的数组（arr）中，然后通过它进行ng-repeating。但现在它不是一个火力阵列......有什么想法吗？

p.s.我认为我不能使用任何内置的 firebase 排序，因为每个用户的距离都是唯一的，并且每个位置都需要纬度和经度。

【问题讨论】：

Doh，我可以通过将 arr 添加到作用域来对 arr 数组进行 ng-repeat，所以不用担心。仍然希望有一个更优雅的方法来解决这个问题....

标签： javascript jquery angularjs firebase angularfire

【解决方案1】：

为什么不在您的模板中评估$scope.getDistance()？

您只需在$scope 上创建一个$firebaseArray()。

$scope.cabyns = $firebaseArray(ref);

然后在您的模板中，您可以使用ng-repeat 中的项目调用$scope.getDistance()。使用ng-if 方向，您可以声明是否应该加载它。

<ul>
  <li ng-repeat="item in cabyns"> 
    <span ng-if="getDistance(item)">
      {{ item.name }}
    <span> 
  </li>
</ul>

如果你正在做地理围栏，你可以尝试做的另一件事是使用GeoFire。

【讨论】：

$scope.cabyns 是一个错字，这是一个 firebase 俱乐部数组（在上面更改）。所以它正在等待 $firebasyArray 加载，然后对 firebase 数组运行距离检查。所以我认为您的解决方案是相同数量的处理，因为它仍在检查每个项目的 getDistance，不是吗？
阅读 GeoFire，看起来可能会有所帮助 :)

【解决方案2】：

所以我选择了 GeoFire。它与上面的实现几乎相同，但对于缩放应该更好。如果有人感兴趣，这就是您的 GeoFire 函数的样子：

var array = [];
$scope.publicArray = array;
$scope.geoFunc = function() {
    geoQuery = geoFire.query({
    center: [userData.Latitude, userData.Longitude],
    radius: 25
  });
      geoQuery.on("key_entered", function(key, location, distance) {
    console.log(key + " is located at [" + location + "] which is within the query (" +    distance.toFixed(2) + " km from center)");
    var newRef = new Firebase(furl + "/clubs/" + key);
    $scope.thing = $firebaseObject(newRef);
    array.push($scope.thing);
  });
};

然后你可以通过你的 publicArray 进行 ng-repeat。

【讨论】：