在角精确过滤器 [英] exact filter in angular

查看:199
本文介绍了在角精确过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在角,有没有修改的过滤器,使得它只返回确切的方式相匹配?

In Angular, is there a way to modify the filter such that it only returns exact matches?

例如:

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

var wordsFiltered = filter('filter')
( 
    words, 
    { 
        'title': 'all'
    } 
);  

以上将匹配'球','墙','所有'和'合金'。不过,我想它像只匹配所有。没有办法去改变它?

The above will match 'ball', 'wall', 'all' and 'alloy'. But I would like it to only match 'all'. Any way to change it?

推荐答案

从AngularJS开始v.1.1.3是本身提供准确的过滤

UPDATE

Starting from AngularJS v.1.1.3 the exact filtering is provided natively:

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>

<大骨节病> Plunker

您的问题意味着你想匹配多个对象属性,所以这里有一个过滤器,这是否:

Your question implies that you would want to match against multiple object properties so here's a filter that does that:

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

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

<大骨节病> PLUNKER

这篇关于在角精确过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆