Angular filter by text search and dropdown

Question

I'm having trouble and I can't seem to find an answer. I'm trying to filter using an text input box and a drop down menu. Its for a fantasy football app to give you an idea. Some code below

 <form class="form-inline search-width">
<input class="search form-control" type="text" ng-model="nameSearch.name">
<select class="form-control" ng-model="nameSearch.position">
    <option value="All">All</option>
    <option value="QB">QB</option>
    <option value="RB">RB</option>
    <option value="WR">WR</option>
    <option value="TE">TE</option>
    <option value="DEF">DEF</option>
    <option value="K">K</option>
</select>
    {{nameSearch.position}}
</form>
<ul class="list">

    <li ng-repeat="list in playerlist" 
        ng-click="PlayerSelected($event, this)">Rank: {{list.Rank}} Pos: {{list.Position}} {{list.Team}}</br>
        {{list.Last}}, {{list.First}} Bye: {{list.Bye}}</li>

</ul>

I have the faintest idea of how to make the search work with both inputs. The drop down should only search the position value. The input box can really seach anything.

Answer 1

Custom filter can be useful in your situation. That how I would solve this.

The filter:

angular.module('DraftBoard').filter('playersFilter', function () {
    return function (input, filterObject) {
        if (filterObject == undefined) { return input; }

        var searchName = filterObject.name.toLowerCase();
        var searchPosition = filterObject.position.toLowerCase();
        var out = [];
        if (input != undefined) {
            for (var i = 0; i < input.length; i++) {

                var firstName = input[i].First != undefined ? input[i].First.toString().toLowerCase() : '';
                var lastName = input[i].Last != undefined ? input[i].Last.toString().toLowerCase() : '';
                var team = input[i].Team != undefined ? input[i].Team.toString().toLowerCase() : '';
                var position = input[i].Position != undefined ? input[i].Position.toString().toLowerCase() : '';

                var filterCondition = ((searchPosition === 'all') || (position.indexOf(searchPosition) > -1))
                    && ((searchName == '') || (firstName.indexOf(searchName) > -1) || (lastName.indexOf(searchName) > -1) || (team.indexOf(searchName) > -1));

                if (filterCondition) {
                    out.push(input[i]);
                }
            }
        }
        return out;
    };
});

In your controller add this:

$scope.nameSearch = {
        name: '',
        position: 'All'
    };

And in the view use it this way:

<div class="selectionlist">
    <form class="form-inline search-width">
    <input class="search form-control" type="text" ng-model="nameSearch.name">
    <select class="form-control" ng-model="nameSearch.position">
        <option value="All">All</option>
        <option value="QB">QB</option>
        <option value="RB">RB</option>
        <option value="WR">WR</option>
        <option value="TE">TE</option>
        <option value="DEF">DEF</option>
        <option value="K">K</option>
    </select>
        {{nameSearch.position}}
    </form>
    <ul class="list">

        <li ng-repeat="list in playerlist | playersFilter:nameSearch "
            ng-click="PlayerSelected($event, this)">
            Rank: {{list.Rank}} Pos: {{list.Position}} {{list.Team}}</br>
            {{list.Last}}, {{list.First}} Bye: {{list.Bye}}
        </li>

    </ul>

</div>