通配符上的角度智能搜索答案

【问题标题】：Angular smart search on wildcard通配符上的角度智能搜索
【发布时间】：2017-02-03 11:38:07
【问题描述】：

假设您有一个包含以下对象的数组：

{id: Integer, name:'String'}

以下面的数组为例：

   $scope.users = [{
            id: 1, name: 'Marc Edgelund main'
    }]

然后您可以通过以下方式显示这些对象：

那么你有以下html：

      <input type="text" ng-model="search.$"/>

  <table>
    <thead>
      <th>id</th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter:search">
        <td>
          {{user.id}}
        </td>
        <td>
          {{user.name}}
        </td>
      </tr>
    </tbody>
  </table>

现在假设您搜索字符串：Marc Main，结果将为空。

这是因为 Angular 会检查对象的值并将其与字符串匹配。然而，在上面的示例中，系统的客户端可能不会使用“中间”名称作为搜索参数，这意味着搜索将不一致并且会惹恼最终用户，因为他们将无法找到他们正在寻找的内容。

我的问题是如何创建允许上述功能的智能搜索功能？

这是一个展示我的例子的小提琴：

Fiddle

【问题讨论】：

为什么投反对票？

标签： javascript angularjs search

【解决方案1】：

我在这里找到了与您的问题类似的内容：AngularJS filter for multiple strings。

我将 surfbuds 的答案与 Matthew Berg 的答案的循环逻辑结合起来传递您要过滤的属性名称，以获得有效的解决方案。完全归功于这两个人在他们的帖子中的精彩解释。结合起来，就变成了

var app = angular.module('myApp', []);

app.filter('filterByObjectName', function () {
return function (input, searchText, propertyName) {
    var returnArray = [];
    var searchTextSplit = searchText.toLowerCase().split(' ');
    for (var x = 0; x < input.length; x++) {
        var count = 0;
        for (var y = 0; y < searchTextSplit.length; y++) {
            let propertyValue = input[x][propertyName];
            if (propertyValue.toLowerCase().indexOf(searchTextSplit[y]) !== -1) {
                count++;
            }
        }
        if (count == searchTextSplit.length) {
            returnArray.push(input[x]);
        }
    }
    return returnArray;
}
});

app.controller('mainController', ['$scope', function ($scope) {
$scope.search = 'Marc';
$scope.users = [
    {
        id: 1,
        name: 'Marc Edgelund main'
    }
];
}]);

你的 html 变成：

<table>
 <thead>
  <th>id</th>
  <th>Name</th>
 </thead>
 <tbody>
 <tr ng-repeat="user in users | matchAccessLevel:search:'name'">
  <td>{{user.id}}</td>
  <td>{{user.name}}</td>
 </tr>
 </tbody>
</table>

【讨论】：