使用angular js排列搜索过滤器

Question

问题：当我输入“ 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>

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

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