如何通過部分字符串屬性過濾ng-repeat中的值？

Question

我有帶有產品和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中，我只想顯示具有內部name屬性和以下字母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

您可以從角度使用過濾器功能：

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