Javascript 在HTML中使用AngularJS过滤器

我正在学习AngularJS中的过滤器。目前，我在控制器中具有以下功能：

var myApp = angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
  $scope.people = [
    { id:1, name:'Bill' },
    { id:2, name:'George' },
    { id:3, name:'Jerry' },
    { id:4, name:'Elaine' },
    { id:5, name:'Kramer' }
  ];
}]);

我试图显示所有名字中包含“I”的人。我知道如何显示姓名。我只是不知道如何过滤它们。目前，我使用以下方式显示它们：

<div ng-controller='MyController'>
  <div>
    People with names that have an "i":
    <span ng-repeat="person in people">({{person.id}}) - {{person.name}} </span>
  </div>
</div>

如何在标记中添加筛选器，以便仅显示其姓名中包含“I”的人员

谢谢大家!

简单地说：

<span ng-repeat="person in people | filter:'i'">{{person.name}} </span>

@源

创建一个过滤器

myApp.filter("filterI", function() {
  return function(input, filterBy) {
    var filtered = [];
    angular.forEach(input, function(item) {
       if(item.name.indexOf(filterBy) > -1) {
        filtered.push(item);
      }
    });
    return filtered;
  }
})

在ng repeat中调用该筛选器

---

这将筛选人员数组并在筛选后的数组中重复操作。

如果可以，您可以指定要应用筛选器的属性

<span ng-repeat="person in people | filter:{ name: 'i' }">
  ({{person.id}}) - {{person.name}})  
</span>

---

如果您喜欢学习过滤器，那么这可能对您有用：

myApp.filter('contains', function() {
  return function(text, needle) {
    if (text) {
      if (text.indexOf(needle) != -1) {
        return text;
      } else {
        return '';
      }
    }
    return '';
  }
});

将其包含在您的html中：

<span ng-repeat="person in people">{{person.name| contains:'i'}} </span>

通过这种方式，您可以传递一个参数，并确保它只过滤名称

其他答案也是正确的

---

差点忘了：这是一个

如果我需要同时显示此人的姓名和身份证怎么办？过滤器如何知道要查看的值？

<span ng-repeat="person in people">{{person.name| contains:'i'}} </span>