Question

这一定是非常常见但是我一直无法找到答案（所以我希望你们能帮忙）

出于这个问题的目的，我创造了以下小提琴：

HTML：

    <div ng-controller="MyCtrl">
  <div>
      <input type="text" ng-model="search.$"/>
  </div>
  <table>
    <thead>
      <th>Name</th>
      <th>Street</th>
      <th>Number</th>
    </thead>
    <tbody>
      <tr ng-repeat="item in tableData |filter:search">
        <td>{{item.name}}</td>
        <td>{{item.street}}</td>
        <td>{{item.number}}</td>
      </tr>
    </tbody>
  </table>

</div>

JavaScript的：

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
  $scope.tableData = [];
  for (i = 0; i < 100; i++) {
    $scope.tableData.push({
      id: i,
      name: generateRandomName(),
      street: generateRandomName(),
      number: generateRandomNumber()
    })
  }

  function generateRandomName() {
    var length = 4;
    var charset = "abcdefghjknpqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";

    var retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
      retVal += charset.charAt(Math.floor(Math.random() * n));
    }

    return retVal;
  }

  function generateRandomNumber() {
    return Math.floor(Math.random() * 10);
  }
}

可以在这里找到小提琴：Fiddle

现在让我解释一下这个问题。

正如您所看到的，在这种情况下，对象由四个字段组成：id,name,street,number

但是在我们的表中，我们没有显示字段id

我们已将所有这些对象添加到tableData数组中。为了过滤/搜索我们的表格，我们创建了一个输入字段：

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

注意ng-model="search.$"现在我们希望通过这个单一文本输入来搜索表格。然而，某些事情很奇怪（从用户的角度来看）：

我们搜索数字95，但结果显示似乎与我们的搜索无关。

问题是即使表中没有显示值，search.$也会搜索整个对象。上图中显示的结果实际上是已找到的对象的id field。由于最大街道数为10，因此搜索大于10的数字会导致错误的结果。

所以我的问题是你如何解决这个问题？如何使用单个文本输入限制搜索对象中的特定字段？

Answer 1

将您的搜索变量放在控制器

中

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

 $scope.search = "";

  $scope.tableData = [];
  for (i = 0; i < 100; i++) {
    $scope.tableData.push({
      id: i,
      name: generateRandomName(),
      street: generateRandomName(),
      number: generateRandomNumber()
    })
  }

  function generateRandomName() {
    var length = 4;
    var charset = "abcdefghjknpqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ";

    var retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
      retVal += charset.charAt(Math.floor(Math.random() * n));
    }

    return retVal;
  }

  function generateRandomNumber() {
    return Math.floor(Math.random() * 10);
  }


}

根据搜索值过滤

<div ng-controller="MyCtrl">
  <div>
      <input type="text" ng-model="search"/>
  </div>
  <table>
    <thead>
      <th>Name</th>
      <th>Street</th>
      <th>Number</th>
    </thead>
    <tbody>
      <tr ng-repeat="item in tableData | filter:{name:search}">
        <td>{{item.name}}</td>
        <td>{{item.street}}</td>
        <td>{{item.number}}</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 2

我认为您需要定义自己的comparator：

{{ filter_expression | filter : expression : comparator}}

请参阅filter

角度ng-repeat仅搜索特定字段

2 个答案: