AngularJS filter on multiple parameters

Question

I have table that is populated from $scope and two search textboxes in header that I am using to filter user name and e-mail:

<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 comes from controller via $http :

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

But when the page initially load, table is empty. Only when I write something in textboxes and delete the input, table is populated and search by both condition is working normally. Is this some kind of bug?
Thanks in advance.

EDIT: Found a solution:

I've needed to initialize two ng-model parameters inside controller:

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

tymeJV, thank you for your answers.

Sounds like a digest cycle is never being started ($http should start one automatically). Is that $http call in your controller or a service? — tymeJV
– tymeJV, Commented Oct 13, 2013 at 18:00
Put a log statement inside the success, is the log called on page load? — tymeJV
– tymeJV, Commented Oct 13, 2013 at 18:04
I've put console.log('I'm here') inside $http and it executes on page load. You can check it on tbrzica.comli.com. — Tomislav
– Tomislav, Commented Oct 13, 2013 at 18:07
Found It!! Inside controller I've to initialize two serch parameters: $scope.searchName=""; $scope.searchMail=""; — Tomislav
– Tomislav, Commented Oct 13, 2013 at 18:24

ThanhHH · Accepted Answer · 2014-08-11 05:17:51Z

4

In the controller, you can create a scope function for filter as following:

$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);
    }
}

And in HTML, you can apply the filter following:

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

Hope this help!

answered Aug 11, 2014 at 5:17

ThanhHH

6,6001 gold badge22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS filter on multiple parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related