Question

我有这个带有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中实现所需过滤器的最佳方法是什么？

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

    });

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

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

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

3 个答案: