Javascript 仅重复搜索特定字段

这一定很常见，但我一直找不到答案（所以我希望你们能帮忙）

为了回答这个问题，我制作了以下小提琴：

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>

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);
  }
}

请注意

ng model=“search.$”

现在，通过这个文本输入，我们希望搜索表。然而，有些事情很奇怪（从用户的角度）：

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

问题是

搜索。$

搜索整个对象，即使值未显示在表中。上图中显示的结果实际上是找到的对象的

id字段

。由于最大街道编号为10，任何搜索超过10的编号都会导致错误结果

---

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

将搜索变量放在控制器中

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);
  }


}

var myApp=angular.module（'myApp'，[]）；
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，function（）{}）；
函数MyCtrl（$scope）{
$scope.search=“”；
$scope.tableData=[]；
对于（i=0；i<100；i++）{
$scope.tableData.push({
id:我，
名称：GeneratorDomain（），
街道：GeneratorDomain（），
编号：generateRandomNumber（）
})
}
函数生成器域名（）{
变量长度=4；
var charset=“abcdefghjknpqrstuvxyzabefghjklmnopqrstuvxyz”；
var retVal=“”；
对于（变量i=0，n=charset.length；i

并根据搜索值进行筛选

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

名称
街头
数
{{item.name}
{{item.street}
{{item.number}

我认为您需要定义自己的

比较器

：

{{ filter_expression | filter : expression : comparator}}

---

请参见

选项将是使用自定义筛选器或从每个对象中删除可能不实用的id这对其他值有效还是仅对名称有效？是否可以执行筛选：{name:search，street:search，number:search}？是的，但这将返回与所有三列匹配的数据。

{{ filter_expression | filter : expression : comparator}}