AngularJS在多个参数上过滤

AngularJS filter on multiple parameters

本文关键字：过滤 参数 AngularJS      更新时间：2023-09-26

我有从$scope填充的表，标题中有两个搜索文本框，用于过滤用户名和电子邮件：

<table class="table">
<thead>
<tr>
    <th></th>
    <th><input type="search" placeholder="Search" ng-model="searchName"></th>
    <th><input type="search" placeholder="Search" ng-model="searchMail"> </th>
    <th></th>
</tr>
<tr>
    <th>ID</th>
    <th>Name</th>
    <th>email</th>
    <th>password</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in dataForTable | filter:{user_fullname : searchName, user_email : searchMail}">
    <td>{{q.user_id}}</td>
    <td>{{q.user_fullname}}</td>
    <td>{{q.user_email}}</td>
    <td>{{q.user_password}}</td>
</tr>
</tbody>

dataForTable 通过 $http 来自控制器：

$http.get('http://tbrzica.comli.com/rest/index.php/simple/users').success(function(data){
   $scope.dataForTable=data;
});

但是，当页面最初加载时，表为空。只有当我在文本框中写一些东西并删除输入时，才会填充表格并且按两个条件搜索才能正常工作。这是某种错误吗？
提前谢谢。

编辑：找到解决方案：

我需要在控制器中初始化两个 ng 模型参数：

$scope.searchName="";
$scope.searchhMail="";

tymeJV，谢谢你的回答。

在控制器中，您可以为过滤器创建一个范围函数，如下所示：

$scope.filterUser = function(fullName, email) {
    return function(user) {
        return (fullName == undefined || fullName.length == 0 || user.user_fullname == fullName)
            && (email == undefined || email.length == 0 || user.user_email == email);
    }
}

在HTML中，您可以应用以下过滤器：

<tr ng-repeat="q in dataForTable | filter:filterUser(searchName, searchMail)">
    <td>{{q.user_id}}</td>
    <td>{{q.user_fullname}}</td>
    <td>{{q.user_email}}</td>
    <td>{{q.user_password}}</td>
</tr>

希望这有帮助！

相关文章：