Angular过滤器搜索列表元素时显示不匹配值问题

我一眼就看出问题所在了——你用的AngularJS默认filter会遍历数组中每个元素的所有属性进行模糊匹配。你的versionLi里每个条目是数组，第一个元素是类似217233的ID，这个ID里包含了"12"，所以当你搜索"12"时，这些ID带"12"的条目（比如16开头的版本对应的ID）也会被误匹配出来。

下面给你两种解决方案，按需选择：

方案1：仅针对版本号字段进行模糊匹配 #

最简单的修正方式是让过滤器只检查版本号所在的字段（也就是数组的第1个索引位置），而不是整个数组对象。修改HTML中的ng-repeat部分即可：

<tr ng-repeat="friend in versionLi | filter : {1: searchText} ">

这里{1: searchText}表示只匹配数组中索引为1的元素（也就是版本号字符串），这样搜索"12"时，只会检查版本号里是否包含"12"，不会再去匹配ID里的"12"了，完美解决误匹配问题。

方案2：实现前缀严格匹配（可选） #

如果你的需求是必须以搜索文本开头（比如搜"16"只显示16开头的版本，而不是版本号里任意位置有"16"的），可以自定义一个过滤器：

首先在myApp.js中添加自定义过滤器：

var appOne = angular.module('appOne', ['ngRoute']);

// 添加自定义前缀匹配过滤器
appOne.filter('startsWith', function() {
  return function(items, searchText) {
    // 如果没有搜索内容，返回全部条目
    if (!searchText) return items;
    // 统一转小写，实现不区分大小写的匹配
    searchText = searchText.toLowerCase();
    return items.filter(function(item) {
      // 检查版本号是否以搜索文本开头
      return item[1].toLowerCase().startsWith(searchText);
    });
  };
});

appOne.controller('controllerOne', function ($scope) {
 $scope.versionLi = [
 ["217233", "16.2(2)", "0", "Class"],
 ["217220", "16.2(1.11)", "1", "Class"],
 ["212675", "16.1(0)", "2", "Class"],
 ["228973", "12.7(3)M1", "4", "Class"],
 ["228973", "12.7(4)M1", "4", "Class"],
 ["228973", "12.7(5)M1", "4", "Class"],
 ["231350", "15.9(3)", "3", "Class"],
 ["228973", "15.7(3)M1", "4", "Class"],
 ["228973", "15.7(4)M1", "4", "Class"],
 ["228973", "15.7(5)M1", "4", "Class"]
 ];
});

然后修改HTML中的过滤器为自定义的startsWith：

<tr ng-repeat="friend in versionLi | startsWith : searchText ">

这样搜索"12"时，只有版本号以"12"开头的条目才会被显示，匹配更严格。

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