如何在angular js中一次使用多个过滤器

How can I use multiple filters at a time in angular js

本文关键字：一次 过滤器 angular js      更新时间：2023-09-26

在下面的代码中，当我使用filter:filterText时，将过滤所有3个参数。如果我想过滤这两个参数中的任何一个，我可以在那里使用什么表达式？

<div ng-controller="someController">
    <input type="text" ng-model="filterText"></input>
    <ul>
        <li ng-repeat="friend in friends|filter:filterText">
            ({{friend.name}},{{friend.phone}},{{friend.mail}})
        </li>
    </ul>
</div>
<script type="text/javascript">
    var myapp1=angular.module("myApp",[]);
    myapp1.controller("someController",function($scope,$filter){
        $scope.friends=[
            {
                name:"asdf",
                phone:"123456",
                mail:"asd@gmail.com"
            },
            {
                name:"qwe",
                phone:"456887",
                mail:"qwer@yahoo.com"
            },
            {
                name:"cvb",
                phone:"7786887",
                mail:"some@gmail.com"
            }
        ];
    });
</script>

通过为筛选器定义对象，可以定义要筛选的字段。以下示例仅在字段name和mail中搜索：

var myapp1=angular.module("myApp",[]);
myapp1.controller("someController",function($scope,$filter){
  $scope.friends=[{
    name:"asdf",
    phone:"123456",
    mail:"asd@gmail.com"
  },
  {
    name:"qwe",
    phone:"456887",
    mail:"qwer@yahoo.com"
  },
  {
    name:"cvb",
    phone:"7786887",
    mail:"some@gmail.com"
  }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="someController">
    Name: <input type="text" ng-model="filterName" />
    Email: <input type="text" ng-model="filterEmail" />
    <ul>
        <li ng-repeat="friend in friends|filter:{ name: filterName, mail: filterEmail}">
        ({{friend.name}},{{friend.phone}},{{friend.mail}})
        </li>
    </ul>
</div>

You can do this : 
<input type="text" ng-model="filterName" placeholder="by name"/>
<input type="text" ng-model="filterMail" placeholder="by mail"/>
<ul>
    <li ng-repeat="friend in friends|filter:filterName|| filterMail">
        ({{friend.name}},{{friend.phone}},{{friend.mail}})
    </li>
</ul>
相关文章：