Question

我有一个ng-repeat过滤参数 city ＆amp; first_name ，如示例所示：

vm.search = {
    "city": "D.C.",
    "first_name": "Chu"
};

<li ng-repeat="item in user | filter: search">...

＆＃13;

var appname = 'app';
var dependencies = [];
angular.module(appname, dependencies);

var app = angular.module(appname);

var userC = function ($scope) {
	var vm = $scope;

    vm.search = {
        "city": "D.C.",
        "first_name": "Chu"
    };
  
    vm.user = [
        {
            "id": 1,
            "first_name": "Chuck",
            "last_name": "Norris",          
            "city": "Washington D.C.",
            "languages": [
                {
                    "id": "41",
                    "name": "English"
                },
                {
                    "id": "73",
                    "name": "Japanese"
                }
            ]
        }
    ];
};

app.controller('userC', userC);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="app" ng-controller="userC">
    <li ng-repeat="item in user | filter: search track by item.id">
        {{ item.first_name }} {{ item.last_name }}
    </li>
</ul>

＆＃13;

但现在我需要按语言进行过滤，这是一个对象数组：

vm.search = {
    "languages": [
      {
        "name": "Japanese"
      }
    ]
};

<li ng-repeat="item in user | filter: search">...

＆＃13;

var appname = 'app';
var dependencies = [];
angular.module(appname, dependencies);

var app = angular.module(appname);

var userC = function ($scope) {
	var vm = $scope;

    vm.search = {
        "languages": [
          {
            "name": "Japanese"
          }
        ]
    };
  
    vm.user = [
        {
            "id": 1,
            "first_name": "Chuck",
            "last_name": "Norris",          
            "city": "Washington D.C.",
            "languages": [
                {
                    "id": "41",
                    "name": "English"
                },
                {
                    "id": "73",
                    "name": "Japanese"
                }
            ]
        }
    ];
};

app.controller('userC', userC);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="app" ng-controller="userC">
    <li ng-repeat="item in user | filter: search track by item.id">
        {{ item.first_name }} {{ item.last_name }}
    </li>
</ul>

＆＃13;

正如您所看到的，没有结果，因为默认的过滤器无法完成这项工作。

有人可以帮我找到适合这种情况的过滤器吗？

这两个例子都在这里：

Answer 1

您必须将languages声明为对象：

vm.search = {
    "languages":
      {
        "name": "Japanese"
      }
};

Here's代码。

评论后更新：如果您想要更复杂的过滤器，可以使用函数而不是对象。 Angular会在user数组上调用Array.prototype.filter()，因此可以通过以下方式定义函数：

var allowedLanguages = [
  "Japanese",
  "Brazilian Portuguese"
];

vm.search = function(item) {
  for (var i = 0; i < item.languages.length; i++) {
    if (allowedLanguages.indexOf(item.languages[i].name) !== -1) {
      return true;
    }
  }

  return false;
};

AngularJS：使用具有多个对象的数组过滤ng-repeat

1 个答案: