Question

在下面的代码中，当我使用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>

Answer 1

通过为过滤器定义对象，您可以定义要过滤的字段。以下示例仅搜索字段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>

Answer 2

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>

如何在角度js中一次使用多个滤镜

2 个答案: