Angular filter in deep object ng repeat

Question

I follow this question to filter ng-repeat by field

ng-repeat: single-field filter

However, my case is different, this is actually a field in the object value of the main object. Basically I want to show only data.a == 1

The following code works in the first list. The second list gives me an error:

 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

Any help on how to do this or is there a better way?

UPDATE 1

I tried angular.filter filterBy and it didn't work either. Give me an empty array.

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

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

UPDATE 2

I tried it below

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

It seems to work, but I need an exact match, not a substring. I read this, but didn't seem to find a way to add true Angular filter matching .

Any clue?

UPDATE 3 (CORRECTED RESPONSE):

This works http://plnkr.co/edit/qJl6MtY6fOlVtD9Rv999?p=preview

I basically added this to the controller

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

and do ng-repeat on filteredItems . I do not see a way to pass true param in the view directly.

Answer 1

If you want to access an internal property, you need to access it with the object designation:

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

Check out this plunker .

Answer 2

If you use \ can upgrade to angular 1.3, you can use this: 1.3 filters This is faster. In particular, you can use filterBy

See: plunkr example

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

Otherwise, use a custom function. See my answer here: custom function