javascript - Angular 通配符智能搜索

Question

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

{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 :

Fiddle

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