ng-repeat中的角度过滤器与深对象

时间:2015-03-19 09:03:56

标签: javascript angularjs angularjs-ng-repeat angular-filters

我正在关注这个问题,用字段

过滤ng-repeat

ng-repeat :filter by single field

但是我的情况不同,它实际上是主对象的对象值中的一个字段。基本上我只想显示data.a == 1

以下代码适用于第一个列表。第二个列表给了我错误:

angular.module('myapp', [])
.controller('mainCtrl', function ($scope) {
    $scope.items = [{
        name: "John",
        data: {
            a: 1
        }
    }, {
        name: "Lee",
        data: {
            a: 2
        }
    }, {
        name: "Rue",
        data: {
            a: 3
        }
    }, {
        name: "Peter",
        data: {
            a: 1
        }
    }];
});

HTML

<div ng-controller="mainCtrl">
    <h1>List 1</h1>
    <p ng-repeat="item in items">{{ item.name }}</p>
    <h1>List 2</h1>
    <p ng-repeat="item in items | filter: {data.a :1}">{{ item.name }}</p>
</div>

http://plnkr.co/edit/nh4GryqZJbEiXSzMzTKk

有关如何做到这一点的任何帮助还是有更好的方法?

更新1

我尝试了angular.filter filterBy,但它也没有用。给我空白阵列。

http://plnkr.co/edit/nh4GryqZJbEiXSzMzTKk?p=preview

    <p ng-repeat="item in items | filterBy: ['item.data.a'] :1">{{ item.name }}</p>

更新2

我试过以下

<p ng-repeat="item in items | filter: {data :{a:1}}">{{ item.name }}</p>

它似乎工作但我需要完全匹配,而不是子串匹配。我看过这个,但似乎找不到添加true AngularJS Filter Exact Match

的方法

有任何线索吗?

更新3(正确的答案):

这有效http://plnkr.co/edit/qJl6MtY6fOlVtD9Rv999?p=preview

基本上我把它添加到控制器

$scope.filteredItems = $filter('filter')($scope.items, {data :{a:1}}, true); 

并在ng-repeat上执行filteredItems。我没有看到直接在视图中传递true param的方法。

2 个答案:

答案 0 :(得分:6)

如果要访问内部属性,则需要使用对象表示法访问它:

<p ng-repeat="item in items | filter: {data :{a:1}}">{{ item.name }}</p>

选中plunker

答案 1 :(得分:3)

如果你正在使用\可以升级到angular 1.3,那么你可以使用它:1.3 filters这些更快。特别是,您可以使用filterBy

请参阅:plunkr example

<p ng-repeat="item in items | filterBy: ['data.a'] :1">{{ item.name }}</p>

否则,请使用自定义功能。请在此处查看我的回答:custom function