在Angularjs应用程序中,使用嵌套对象属性过滤ng repeat不起作用

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

本文关键字:属性 对象 过滤 ng 不起作用 repeat 嵌套 应用程序 Angularjs      更新时间:2023-09-26

我有以下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"
      }
    } ]

我正在将ng-repeat过滤为

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

在我的控制器中,我有:

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

如果我删除client.name : accountSearch.clientName,在ng个重复过滤标准中,accountsList是基于accountNumberaccountName正确过滤的。但是,当我将client.name : accountSearch.clientName包含在ng重复筛选条件中时,控制台中会显示以下错误,并且不会进行accountsList的筛选。

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

有人能帮忙修理吗?

使用这样的内联过滤器可以解决问题。

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

这是正在工作的plnkr检查这个。http://plnkr.co/edit/B3R758UjxldvZLDkxO8E?p=preview