角度精确过滤器

Ben*_*Ben 10 filter angularjs

在Angular中,有没有办法修改过滤器,使其只返回完全匹配?

例:

var words = [
    {   title: "ball"   },
    {   title: "wall"   },
    {   title: "all"    },
    {   title: "alloy"  }
];

var wordsFiltered = filter('filter')
( 
    words, 
    { 
        'title': 'all'
    } 
);  
Run Code Online (Sandbox Code Playgroud)

以上将匹配'球','墙','所有'和'合金'.但我希望它只匹配'全部'.有什么方法可以改变吗?

Ste*_*wie 19

UPDATE

从AngularJS v.1.1.3开始,本机提供了精确过滤:

Find words that exactly match title: 
<input ng-model="match.title" />
<br>
and exactly match type: 
<input ng-model="match.type" />
<hr>
<table>
  <tr ng-repeat="word in words | filter:match:true">
   <td>{{word.title}}</td> 
  </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

Plunker


你的问题意味着你想要匹配多个对象属性,所以这里有一个过滤器来做到这一点:

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.match = {};
        $scope.words = [
          { title: "ball", type: 'object' },
          { title: "wall", type: 'object' },
          { title: "all", type: 'word' },
          { title: "alloy", type: 'material' }
        ];

      }
    ]
  );

app.filter('exact', function(){
  return function(items, match){
    var matching = [], matches, falsely = true;

    // Return the items unchanged if all filtering attributes are falsy
    angular.forEach(match, function(value, key){
      falsely = falsely && !value;
    });
    if(falsely){
      return items;
    }

    angular.forEach(items, function(item){ // e.g. { title: "ball" }
      matches = true;
      angular.forEach(match, function(value, key){ // e.g. 'all', 'title'
        if(!!value){ // do not compare if value is empty
          matches = matches && (item[key] === value);  
        }
      });
      if(matches){
        matching.push(item);  
      }
    });
    return matching;
  }
});
Run Code Online (Sandbox Code Playgroud)
<body ng-controller="AppController">

  Find words that exactly match title: 
  <input ng-model="match.title" />
  <br>
  and exactly match type: 
  <input ng-model="match.type" />
  <hr>
  <table>
    <tr ng-repeat="word in words | exact:match">
     <td>{{word.title}}</td> 
    </tr>
  </table>  
</body>
Run Code Online (Sandbox Code Playgroud)

PLUNKER


小智 9

试试这个 :

var words = [
    {   title: "ball"   },
    {   title: "wall"   },
    {   title: "all"    },
    {   title: "alloy"  }
];

var wordsFiltered = filter('filter')
( 
    words, 
    { 
        'title': 'all'
    },
    true
);
Run Code Online (Sandbox Code Playgroud)


mch*_*bok 2

我会创建一个新的过滤器。这是你想要的吗?

超文本标记语言

<div ng-controller="MyCtrl">
     {{words | exactMatch:'all'}} !
</div>
Run Code Online (Sandbox Code Playgroud)

JavaScript

var myApp = angular.module('myApp',[]);

myApp.filter('exactMatch', function() {
    return function(words, pattern) {
        var result = [];
        words.forEach(function (word) {
            if (word.title === pattern) {
                result.push(word);
            }
        });                
        return result;
    }
});

function MyCtrl($scope) {
    $scope.words = [
        {title: "ball", other: 1},
        {title: "wall", other: 2},
        {title: "all", other: 3},
        {title: "alloy", other: 4},
        {title: "all", other: 5},
    ];
}
Run Code Online (Sandbox Code Playgroud)

JsFiddle:jsfiddle
有关自定义过滤器的更多信息:过滤器创建自定义过滤器和使用过滤器

如果你想在 Javascript 中使用过滤器而不是 html,你应该看这里:jsfiddle