Question

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

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

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

基本上，我希望输出为：

输出

simon, 1

我正在使用Angular 1.2。

Answer 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/

Answer 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>

在Controller上过滤（使用$ param）

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

Answer 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}">

Answer 4

检查是否有帮助

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

Answer 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;
            })();
      }
    });
  }

通过这种方式，您可以在多个输入框中输入按键，它们会在特定的按键上进行搜索。

角度过滤器恰好在对象键上

5 个答案: