过滤器使用AngularJS单输入多领域过滤器、领域、AngularJS

2023-09-14 00:26:39 作者:深情与你

我有一个JSON对象,它是如下:

I have a JSON object which is as follows

[{
    "id": 1,
    "firstName": "Jennifer",
    "middleName": null,
    "lastName": "Aniston",
    "address": "New York City",
}, {
    "id": 2,
    "firstName": "Angelina",
    "middleName": null,
    "lastName": "Jolie",
    "address": "Beverley Hills",
}, {
    "id": 3,
    "firstName": "Emma",
    "middleName": null,
    "lastName": "Watson",
    "address": "London",
}]

我在视图中使用NG-重复填充此数据。

I'm populating this data in view using ng-repeat.

<td ng-repeat="row in list | filter:filterBeauties">
{{row.firstName}} {{row.lastName}}
</td>

现在我有我想使用过滤这些名字其中一个输入框。我想用同样的输入框进行过滤的firstName,然后筛选lastName的和不过滤任何东西(如地址)。

Now I have an input box which I'd like to use to filter these names. I would like to use same input box to filter firstName and then filter lastName and don't filter anything else (eg. address).

<input type="text" placeholder="Filter" ng-model="filterBeauties.firstName">

任何想法,我怎么能实现呢?

Any idea how can I achieve it?

推荐答案

好了,所以这是我做过什么来解决这个问题。

Okay So this is what I did to solve it.

我添加了JSON对象创建新的项目(使用 angular.forEach 功能),并通过它进行过滤。

I added a new item in json object (using angular.forEach function) and filtered by it.

$scope.list = beauties.query(function(response) {
    angular.forEach(response, function(value, key) {
          var fullName = value.firstName + ' ' + value.lastName;
          $scope.list[key].fullName = fullName;
   });
});

输入框中输入code:

input box code:

<input type="text" placeholder="Filter" ng-model="filterBeauties.fullName">

NG-重复

<td ng-repeat="row in list | filter:filterBeauties">
{{row.firstName}} {{row.lastName}}
</td>
 
精彩推荐
图片推荐