Question

我正在尝试用firebase学习角度。我正在获取数据并成功输出它。但在此之后，简单的过滤器不能处理这些数据。当我从相同但本地的json文件做简单的$ http.get时，过滤器工作得很好。我的应用程序模块/控制器代码：

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进行更正，<li ng-repeat="person in data | orderByPriority | filter: personInputFilter | filter: personSelectFilter | orderBy: personSorting">下的AngularFire文档中介绍了这一点。

{{1}}

从Firebase加载数据时，AngularJS过滤器无法正常工作

1 个答案: