角度过滤器不适用于多个值

时间:2014-12-14 17:56:42

标签: angularjs filter angularjs-ng-repeat

我无法通过下面的.json文件来搜索我的搜索字段。 一旦我开始在搜索字段中输入内容,所有项目都会消失。

这是我的json文件,作为我的数据库。

[{
    "id": 1,
    "userId": 1,
    "firstName": ["Jack", "text"],
    "lastName": ["Rackum", "text"],
    "phone": ["33221122", "tel"]
}, {
    "id": 2,
    "userId": 1,
    "firstName": ["Ellery", "text"],
    "lastName": ["Queen", "text"]
}, {
    "id": 3,
    "userId": 1,
    "firstName": ["Minnie", "text"],
    "lastName": ["Mouse", "text"]
}]

这是前端的视图文件

<div class="input">
    <input type="text" placeholder="Søg" ng-model="query.$">
    <i class="icon"></i>
</div>


<div class="item" ng-repeat="child in children | filter:query">
    <img class="image" src="images/children/1.jpg">
    <div class="content" >
            <div class="header">
            <a>
                    {{ child.firstName[0] }} {{ child.lastName[0] }}
            </a>
         </div>
    </div>
</div>

我的controllers.js文件

angular.module('ContactsApp')
    .controller('ListController', function ($scope, Contact) {
        $scope.children = Contact.query();
        $scope.fields = ['firstName', 'lastName'];

        $scope.firstname    = ['firstName'];
        $scope.lastname     = ['lastName'];
        $scope.phone        = ['phone'];
    });

最后我的工厂提交了

angular.module('ContactsApp')
    .factory('Contact', function ($resource) {
        return $resource('/api/child/:id', { id: '@id' }, {
            'update': { method: 'PUT' }
        });
    });

1 个答案:

答案 0 :(得分:0)

看起来过滤器在数组内搜索效果不佳。您可能需要更改数据结构。

这是一个Plunker: http://plnkr.co/edit/pC0W6YwhTB9l0CUaZWy0?p=preview

而不是使用

{{child.firstName[0]}}

我用过

{{child.firstName}}

对数据进行适当的更改。