smart987 smart987 - 1 month ago 9
AngularJS Question

filtering ng repeat with nested object property is not working in Angularjs application

I have the following

json
,

$scope.accountsList = [ {
"id": 1,
"number": "AFRC1234",
"name": "ACFRYTE431",
"postalCode": "76565",
"invoices": null,
"courier": {
"id": 1,
"name": "UPS"
},
"client": {
"id": 1,
"code": "FREG",
"name": "Feranget"
}
} ]


And I am filtering
ng-repeat
as ,

<tr ng-repeat="account in accountsList | filter:{ number: accountSearch.accountNumber, name: accountSearch.accountName, client.name : accountSearch.clientName}">


And in my controller I have :

$scope.accountSearch = {
accountNumber :'',
accountName : '',
clientName : ''
};


If I delete
client.name : accountSearch.clientName
, in ng repeat filtering criteria, the
accountsList
is correctly getting filtered based on
accountNumber
and
accountName
. But when I include,
client.name : accountSearch.clientName
in ng repeat filter criteria, the following error is getting displayed in console and filtering of
accountsList
is not happening.

Error: [$parse:syntax] Syntax Error: Token '.' is unexpected, expecting [:] at column 66 of the expression [accounts | filter:{ number: accountSearch.accountNumber, client.name : accountSearch.clientName }] starting at [.name : accountSearch.clientName }].
http://errors.angularjs.org/1.4.3/$parse/syntax?p0=.&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=66&p3=accounts%20%7C%20filter%3A%7B%20number%3A%20accountSearch.accountNumber%2C%20%20%20client.name%20%3A%20accountSearch.clientName%20%7D&p4=.name%20%3A%20accountSearch.clientName%20%7D
minErr/<@http://localhost:8080/bower_components/angular/angular.js:68:12
AST.prototype.throwError@http://localhost:8080/bower_components/angular/angular.js:12881:1
AST.prototype.consume@http://localhost:8080/bower_components/angular/angular.js:12893:1
AST.prototype.object@http://localhost:8080/bower_components/angular/angular.js:12870:9


Can any one help how to fix it?

Answer Source

using your inline filter like that solves the problem.

<div ng-repeat="account in accountsList | filter:{ number: accountSearch.accountNumber,  name: accountSearch.accountName, client :{ name: accountSearch.clientName} }">

and here is the working plnkr check this .http://plnkr.co/edit/B3R758UjxldvZLDkxO8E?p=preview