Question

我目前在ng-repeat上使用过滤功能（不是自定义过滤器）。但是我被告知使用自定义过滤器可以获得更好的性能。我如何使用自定义过滤器进行相同的搜索：

        $scope.searchInOrder = function (item)
        {
            if($scope.search)
            {
                if(item.match("^"+$scope.search, "i"))
                {
                    return item;
                }
            }
            else
            {
                return item;
            }
        }

这是我的fiddle。

所以我在keyboard.keys中使用＆＃34;键来使用这个过滤器filter：searchInOrder＆＃34;但是我如何使用自定义过滤器做同样的事情，例如＆＃34;键入keyboard.keys | customSearchInOrder：搜索＆＃34;以这种方式执行它是否更好（使用自定义过滤器而不是函数），如果是这样，为什么？哪种方式更适合代码可维护性？

Answer 1

哪种方式更好？这完全取决于您的要求和应用。因为重复过滤可能会导致性能问题。正如在这篇非常好的帖子Angular Performance tips中所解释的那样。因此，它可以让您自行决定使用自定义过滤器或代码过滤。

但如果您不担心这一点，那么自定义过滤器会很好。因为它可以重复使用，所以如果您需要为不同的视图/控制器使用相同的过滤器，则无需再次重复过滤。以下是针对您的案例的自定义过滤器。

Updated Fiddle

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {



  $scope.keyboard = {
    "keys": ["cntrlA", "cntrlB", "cntrlC", "cntrlD", "space1", "space2", "space3", "shift"]
  }

});

app.filter('searchKeys', function() {
  return function(items, search) {
    var filtered = [];
    if (search) {
      angular.forEach(items, function(item) {
        if (item.match("^" + search, "i")) {
          filtered.push(item);
        }
      });
    }else{
    	filtered=items;
    }
    return filtered;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div data-ng-app='myApp' data-ng-controller='myCtrl'>

  <!-- using scope function as a filter -->
  <input ng-model="search" placeholder="Search..." />
  <div ng-repeat="key in keyboard.keys | searchKeys: search">
    {{key}}
  </div>
</div>

希望它有所帮助:)。

使用angularjs自定义过滤器而不是执行搜索的功能

1 个答案: