使用 Angular js 排列搜索过滤器答案

【问题标题】：arrange search filters using angular js使用 Angular js 排列搜索过滤器
【发布时间】：2018-10-09 09:02:54
【问题描述】：

问题：当我输入“K”时，它会过滤包含字符“K”的名称和国家/地区。

问题：如何仅过滤“names.name”中的输入字符？

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

app.controller("namesCtrl", function($scope) {
    $scope.names = [
        { name:'Jani', country:'Norway' },
        { name:'Carl', country:'Sweden' },
        { name:'Margareth', country:'England' },
        { name:'Hege', country:'Norway' },
        { name:'Joe', country:'Denmark' },
        { name:'Gustav', country:'Sweden' },
        { name:'Birgit', country:'Denmark' },
        { name:'Mary', country:'England' },
        { name:'Kai', country:'Norway' }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
    <p>
        <input type="text" ng-model="test">
    </p>
    <ul>
        <li ng-repeat="name in names | filter:test">
            {{ name.name }}
        </li>
    </ul>
</div>

【问题讨论】：

看看这个link。希望对您有所帮助。
选择要搜索的键，例如：| filter: {'name' : test}

标签： angularjs

【解决方案1】：

试试这个

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

app.controller("namesCtrl", function($scope) {
    $scope.names = [
        { name:'Jani', country:'Norway' },
        { name:'Carl', country:'Sweden' },
        { name:'Margareth', country:'England' },
        { name:'Hege', country:'Norway' },
        { name:'Joe', country:'Denmark' },
        { name:'Gustav', country:'Sweden' },
        { name:'Birgit', country:'Denmark' },
        { name:'Mary', country:'England' },
        { name:'Kai', country:'Norway' }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
    <p>
        <input type="text" ng-model="test">
    </p>
    <ul>
        <li ng-repeat="name in names | filter:{'name':test}">
            {{ name.name }}
        </li>
    </ul>
</div>

【讨论】：

【解决方案2】：

请您使用如下的自定义过滤器。

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

app.controller("namesCtrl", function($scope) {
  $scope.names = [{
      name: 'Jani',
      country: 'Norway'
    },
    {
      name: 'Carl',
      country: 'Sweden'
    },
    {
      name: 'Margareth',
      country: 'England'
    },
    {
      name: 'Hege',
      country: 'Norway'
    },
    {
      name: 'Joe',
      country: 'Denmark'
    },
    {
      name: 'Gustav',
      country: 'Sweden'
    },
    {
      name: 'Birgit',
      country: 'Denmark'
    },
    {
      name: 'Mary',
      country: 'England'
    },
    {
      name: 'Kai',
      country: 'Norway'
    }
  ];
});

app.filter('searchTerm', function() {
  return function(items, text) {
    if (text) {
      return items.filter(item => {
        return item.name.toLowerCase().includes(text)
      })
    }
    return items;
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
  <p>
    <input type="text" ng-model="test">
  </p>
  <ul>
    <li ng-repeat="name in names | searchTerm:test">
      {{ name.name }}
    </li>
  </ul>
</div>

【讨论】：