如何通过部分字符串属性过滤 ng-repeat 中的值？答案

【问题标题】：How to filter values in ng-repeat by partial string property?如何通过部分字符串属性过滤 ng-repeat 中的值？
【发布时间】：2016-11-02 14:34:47
【问题描述】：

我有这个带有 products 和 filterStr 变量的控制器：

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'Michael', data: 'Berlin' },
       { id: 2, name: 'Maria', data: 'Moscow'}
       { id: 3, name: 'Alex', data: 'Aragon'},
       { id: 4, name: 'Mara', data:'Paris' }
       /*... etc... */
   ];

 $scope.filterStr = 'ar';
});

这里 ng-repeat:

<div ng-repeat="product in products | filter: { name: filterStr }">

在上面的 ng-repeat 中，我只想显示具有内部名称属性的对象，这种字母组合 ar:

id: 2, name: 'Maria', data: 'Berlin'  
id: 4, name: 'Mara', data:'Paris'

在 angularjs 中实现所需过滤器的最佳方法是什么？

【问题讨论】：

Works fine here。不知道是什么问题

标签： javascript angularjs

【解决方案1】：

你可以试试自定义过滤器

<div ng-repeat="product in products | search:'name':'ar' "> 
  {{product.name}}
</div>   

 app.filter('search', function() {

      return function(input,key,searchText) {

        var out = [];    
        angular.forEach(input, function(obj) {

            if(obj[key]){
              var text = obj[key].search(searchText) 
              if(text > 0) {
                out.push(obj);
              }            
            } 

        });
        return out;
      }

    });

【讨论】：

【解决方案2】：

首先：非常感谢@vignesh 的出色回答！ @vignesh 提供的代码鼓励我在自己的项目中进行这样的实现！

第二：在尝试自己实现这个过滤器时，我注意到这个解决方案可以再改进一点......

app.filter('search', function() 
{
    return function(list, field, partialString) 
    {
        // if the search string is invalid or empty - return the entire list
        if (!angular.isString(partialString) || partialString.length == 0) return list;

        var results = [];

        angular.forEach(list, function(item) 
        {
            if (angular.isString(item[field]))
            {
                if (item[field].search(new RegExp(partialString, "i")) > -1)
                {
                     results.push(item);    
                }
            }
        });

        return results;
    }

});

然后我将它与搜索输入和中继器一起使用

<input ng-model="myPartialSearchString" />
<div ng-repeat="item in items | search:'name':myPartialSearchString "> 
  {{item.name}}
</div>

【讨论】：

【解决方案3】：

您可以使用 angular 中的过滤器功能：

<input type="text" placeholder="Search" ng-model="search.$">
<input type="checkbox" ng-model="strict"> Exact match only
<div ng-repeat="product in products | filter: filter:search:strict">

【讨论】：