根据选择值angularjs进行过滤

Question

I want to write a filter according selected value. For example, if i select name option i can search using "input text" all user that have the same name entered. is it possible to use a similar syntax "filter:{serach:name}".

`

<input type="text" data-ng-model="search" /> 
<select name="option">
  <option value="name">name</option>
  <option value="address">address</option>
  <option value="email">email</option>
</select>


        <table>
            <thead>
                <tr>
                    <th>name</th>
                    <th>address</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="user in usersList | filter:{option:search}">
                    <td><span data-ng-bind="user.name"></span></td>
                    <td><span data-ng-bind="user.address"></span></td>
                    <td><span data-ng-bind="user.email"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>
</div>`

Answer 1

Try like that:

<tbody>
    <tr data-ng-repeat="user in usersList | filter:{name:user.name, address: user.address}">
        <td><span ng-model="user.name"></span></td>
        <td><span ng-model="user.address"></span></td>
    </tr>
</tbody>

Answer 2

Maybe creating a custom filter that accepts your select option value as a parameter and the array of items so that you can filter by that option and the value on the text input. May be overkill for what you need.

My lousy example:

app.controller("CurrencyController", function ($scope, $http, $filter) {
    $scope.option = '';//select value
    $scope.search = '';//input text
    $scope.usersList = [
        {'name':'luis', 'id':3, 'address':'somewhere 1'},
        {'name':'charles', 'id':4, 'address':'somewhere 2'},
        {'name':'john', 'id':5, 'address':'somewhere 1'},
        {'name':'mike', 'id':6, 'address':'somewhere 3'}
    ];

    $scope.filterOut = function(){
//create a copy of usersList to keep original if no value for filter
        $scope.usersListCopy = angular.copy($scope.usersList);
        $scope.usersListCopy = $filter('aFilter')($scope.usersListCopy, $scope.search, $scope.option);
    };

}).
filter('aFilter', function() {
    return function(input, searchingFor, searchOnField) {
        if ( searchOnField == '' || searchingFor == '' ) {
            return input;
        } else {
            var returnItems = [];

            for (var a = 0; a < input.length; a++){
                //cycle thru every item key
                if(input[a][searchOnField] == searchingFor){
                    returnItems.push(input[a]);
                }

            }
            console.log(returnItems);
            return returnItems;
        }
    };
});

On my html i just iterate usersListCopy on the table row. And call filterOut with ng-init somewhere at the start so that there is data on usersListCopy. Also set ng-change="filterOut();" on element.