javascript - 从 Firebase 加载数据时，AngularJS 过滤器不起作用

Question

我正在尝试使用 firebase 学习 Angular。我正在获取数据并成功输出它。但在此之后，简单的过滤器无法处理这些数据。当我从相同的本地 json 文件执行简单的 $http.get 时，过滤器工作得很好。我的应用程序模块/ Controller 代码:

var app = angular.module('testSite', ['ngRoute', 'angControllers', 'firebase'])
.value('fbURL', 'https://sizzling-fire-3696.firebaseio.com/')
.factory('personData', function($firebase, fbURL) {
    return $firebase(new Firebase(fbURL));
});
app.controller("angCont", ['$scope', '$http', '$routeParams',
 'personData', 
    function($scope, $http, $routeParams, personData) {
        $scope.data = personData;
}]);

这是我的 html 模板:

<div ng-controller="angCont">
    <select ng-model="personSelectFilter" ng-options="person.name for person in data">
        <option value="">Filter by name</option>
    </select>
    <input type="text" ng-model="personInputFilter" placeholder="Filter">
    <ul>
    <li ng-repeat="person in data | filter: personInputFilter |
     filter: personSelectFilter | orderBy: personSorting">
    Name: <a href="#/persons/{{person.name}}">{{person.name}}</a><br/>
    Surname: {{person.surname}}<br/>
    Age: {{person.age | number}}<br/>
    Experience (months): {{person.exp | number}}</li>
    </ul>
</div>

http://angulartest.hostoi.com/angsite.html#/

Answer 1

$firebase 始终创建一个对象，因此 data 变量包含键/值对。然而，Angular 中的 filter 和 orderBy 需要一个数组。这可以通过使用 orderByPriority 来纠正，这在 AngularFire 文档的 Ordered Data and Arrays 下有介绍。 .

<li ng-repeat="person in data | orderByPriority | filter: personInputFilter |
    filter: personSelectFilter | orderBy: personSorting">