角度过滤器正好在对象键上答案

【问题标题】：Angular filter exactly on object key角度过滤器正好在对象键上
【发布时间】：2019-09-22 15:59:28
【问题描述】：

我有一个像这样的小角度应用程序：

html

<body ng-app>
  <div ng-controller="Ctrl">
    <div ng-repeat="user in users | filter:1">
      <span>{{ user.username }}, {{ user.id }}</span>
    </div>
  </div>
</body>

app.js

function Ctrl($scope) {
  $scope.users = [
    {"id":1,"username":"simon",},
    {"id":8,"username":"betty",},
    {"id":14,"username":"archie",},
    {"id":3,"username":"jumbo1"},
  ]
}

输出

simon, 1
archie, 14
jumbo1, 3

我想要做的是过滤 exact 匹配过滤器参数和过滤器仅在 id 字段上。

基本上，我希望输出是：

输出

simon, 1

我正在使用 Angular 1.2。

【问题讨论】：

exact filter in angular的可能重复

标签： angularjs angularjs-ng-repeat

【解决方案1】：

在 Angular 1.1.3 或更高版本中，您可以使用以下内容：

<div ng-repeat="user in users | filter:{'id':  1}:true">

{'id': 1} 表示只与字段id 比较。这让你：

simon, 1
archie, 14

:true 说“完全匹配”导致：

simon, 1

这是有效的：http://jsfiddle.net/AM95H/

要过滤值列表，如果您在范围变量中有列表，我会在您的 JS 文件中添加一个自定义过滤器：

$scope.filterValues = [1,8];
$scope.myFilter = function(value) {
   return ($scope.filterValues.indexOf(value.id) !== -1);
};

这样使用：

<div ng-repeat="user in users |  filter: myFilter">

要过滤参数列表，我们将创建自己的过滤器。在这种情况下，我们将使用所有要测试的输入值调用一次，而不是每个值调用一次。

因此，我们将收到的第一个参数是输入值数组（在您的情况下为用户），第二个参数将是我们传入的参数 ([1,8])。然后，我们将创建一个输出数组并添加（推送）输入流中与filterValues 之一匹配的任何项目。并返回输出数组。

myApp.filter('myFilter', function () {  
   return function(inputs,filterValues) {
      var output = [];
      angular.forEach(inputs, function (input) {
        if (filterValues.indexOf(input.id) !== -1)
            output.push(input);
       });
       return output;
   };
});

并像这样使用它：

<div ng-repeat="user in users |  myFilter:[1,8]">

这是一个例子：http://jsfiddle.net/AM95H/2/

【讨论】：

完美答案。我会接受。作为对此的扩展，如果我希望过滤器参数是整数列表，这可能吗？我试过filter:{'id': [1,8]} 但这不起作用:(
我会使用自定义过滤器来获得多个有效的完全匹配选项。我更新了。
再次感谢！很好的答案。
还有一件事 - 如果我需要将 filterValues 作为变量传递给过滤器会发生什么？
更新了 - 它有点复杂，但它是一个很好的通用解决方案。

【解决方案2】：

基于https://docs.angularjs.org/api/ng/filter/filter

在模板上过滤：

<tr ng-repeat="friendObj in friends | filter:id:true">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
</tr>

在控制器上过滤（使用 $param）

$scope.friendObj = $filter('filter')(data.friends, { id: parseInt($stateParams.friendId) }, true)[0];

【讨论】：

【解决方案3】：

在过滤器中指定要应用过滤器的对象的键（属性）：

//Suppose Object
var users = [{
  "firstname": "RAM",
  "lastname": "KUMAR",
  "Address": "HOUSE NO-1, Example Street, Example Town"
  },
  {
  "firstname": "SHAM",
  "lastname": "RAJ K",
  "Address": "HOUSE NO-1, Example Street, Example Town"
}]

但您只想对名字应用过滤器

<input type = "text" ng-model = "f_n_model"/>
<div ng-repeat="user in users| filter:{ firstname: f_n_model}">

【讨论】：

【解决方案4】：

检查这是否有帮助

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

【讨论】：

【解决方案5】：

HTML：

<tr class="text"
*ngFor="let resource of myProjectsList |searchByKeyPipe: projectNameFilter: 
'projectName'| searchByKeyPipe: projectIdFilter : 'projectRefNo' | 
 searchByKeyPipe: dueDateFilter : 'dueOn'| searchByKeyPipe: ownerFilter : 
 'projectOwnerName' trackBy :trackByNameFunc">

JS

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "searchByKeyPipe",
  pure: false // marking this pipe as stateful pipe
})
export class SearchByKeyPipe implements PipeTransform {
  transform(items: any, filter: any, key: any) {
    return items.filter(item => {
      if (filter == "" || filter == "-1") {
        return true;
      } else {
        var self = this;
        return function() {
              return item[key]
                .toString()
                .toLowerCase()
                .indexOf(filter.toLowerCase()) > -1
                ? true
                : false;
            })();
      }
    });
  }

通过这种方式，您可以有多个键输入框，它们将搜索特定键。

【讨论】：