AngularJS添加fuzzy angular-filter报错求助及JS实现疑问

你碰到的这个Error: [$injector:unpr] Unknown provider: fuzzyFilterProvider <- fuzzyFilter错误，核心原因是angular-filter包里的fuzzy过滤器并不是直接隶属于angular.filter模块，而是在a8m.fuzzy这个子模块下，你之前只引入了主模块，没依赖这个子模块，所以Angular找不到对应的过滤器提供者。

一、修复过滤器报错的正确配置步骤 #

• 1. 确认你已经引入了angular-filter的CDN（这一步你已经做对了）：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>

• 2. 修改你的Angular模块声明，同时依赖angular.filter和a8m.fuzzy：

var portal = angular.module('app-portal', ['angular.filter', 'a8m.fuzzy']);

• 3. 完成上面两步后，你原来的HTML代码不需要改动，就能正常使用fuzzy过滤器了：

<custom-text name="search" model="list.search"></custom-text>
<li ng-repeat="question in list.questions | fuzzy: list.search">

二、在JavaScript文件中直接实现Fuzzy过滤 #

如果想在JS逻辑里处理过滤（而非HTML模板中），可以通过注入fuzzyFilter服务来实现（Angular的过滤器对应的服务名是过滤器名称加上Filter后缀）。

控制器中实现示例 #

比如在你的组件控制器或者页面控制器里：

portal.controller('QuestionListController', ['$scope', 'fuzzyFilter', function($scope, fuzzyFilter) {
  // 初始化你的数据
  $scope.list = {
    questions: ['Angular入门指南', 'Fuzzy过滤器实战', 'Angular依赖注入详解'],
    search: ''
  };

  // 监听搜索关键词变化，实时执行过滤
  $scope.$watch('list.search', function(newSearchValue) {
    // fuzzyFilter的参数：原始数组、搜索关键词、可选配置对象
    $scope.filteredQuestions = fuzzyFilter($scope.list.questions, newSearchValue);
  });
}]);

之后在HTML里直接遍历过滤后的数组即可：

<custom-text name="search" model="list.search"></custom-text>
<li ng-repeat="question in filteredQuestions">

针对对象数组的进阶配置 #

如果你的questions是对象数组，还可以通过第三个参数指定要匹配的属性：

// 假设数据是对象数组
$scope.list.questions = [
  {id: 1, title: 'Angular入门指南'},
  {id: 2, title: 'Fuzzy过滤器实战'}
];

// 指定只匹配title属性
$scope.filteredQuestions = fuzzyFilter($scope.list.questions, newSearchValue, {
  property: 'title'
});

内容的提问来源于stack exchange，提问作者beanic