javascript - Angular filter by text search and dropdown - Stack Overflow

admin管理员组

文章数量:1279185

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.

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.

• javascript
• angularjs
• angularjs-ng-repeat
• angular-filters

Share Improve this question Follow edited Aug 26, 2015 at 5:04 Alejandro Garcia Anglada 2,40311 gold badge2828 silver badges4141 bronze badges asked Aug 26, 2015 at 4:52 jminterwebsjminterwebs 4511 gold badge11 silver badge77 bronze badges 2

• 1 Can you also share the JS code for this or a better thing would be a fiddle. – Venkata Krishna Commented Aug 26, 2015 at 4:56
• sure its all on github at github./jminterwebs/DraftBoard sorry not that familar with fiddle yet. – jminterwebs Commented Aug 26, 2015 at 4:58

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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>

You should use the filter option from ng-repeat, here is an example for you to check, I hope this help you.

Here u can find custom filter for dropdown and search

i hope this Code will help with something new way !

here is my crack at this http://jsfiddle/0ey84dwu/

HTML: Use ng-repeat and filter it by the text input. Also, use ng-options

    <div ng-app="TestApp">
        <div ng-controller="TestController">
            <input class="search form-control" type="text" ng-model="nameSearch.name">
            <select class="form-control" ng-options="position as position for position in positions" ng-model="nameSearch.position" ng-change="setPosition()">
            </select>

            <div ng-repeat="player in players | filter: nameSearch.name">
               {{player.First}} {{player.Last}}
            </div>
        </div>
    </div>

And then the JS: Have an array of all the players. Depending on your selection of the dropdown, add those players to a new array that contain only players of the selected position. Selecting All will set $scope.players = $scope.allPlayers thus filtering all players by whatever you are searching.

var app = angular.module('TestApp',[]);

app.controller('TestController', function($scope)
{
  $scope.nameSearch = {};
  $scope.nameSearch.position = 'All';
  $scope.positions = ['All','QB','RB','WR','TE','DEF','K'];
  $scope.players = $scope.allPlayers;

  $scope.setPosition = function()
  {
    $scope.players = [];
    if ($scope.nameSearch.position != 'All')
    {
       for (var i in $scope.allPlayers) if ($scope.allPlayers[i].Position == $scope.nameSearch.position) $scope.players.push($scope.allPlayers[i]);   
       return;
     }
     $scope.players = $scope.allPlayers;
  };

  $scope.allPlayers = [
  {
    "Rank":1,
    "First":"Le'Veon",
    "Last":"Bell",
    "Position":"RB",
    "Team":"PIT",
    "Bye Week":11
  },
  {
    "Rank":2,
    "First":"Jamaal",
    "Last":"Charles",
    "Position":"RB",
    "Team":"KC",
    "Bye Week":9
  },
  {
    "Rank":3,
    "First":"Adrian",
    "Last":"Peterson",
    "Position":"RB",
    "Team":"MIN",
    "Bye Week":5
  }...
  ...
  ..
  ...];

  $scope.setPosition();

});

You could write a custom filter and shorten this code even more

Change your <select>'s ng-model to nameSearch.Position(uppercase P) so that it matches the position field name of playerlist

   <select class="form-control" ng-model="nameSearch.Position">

Then change your ng-repeat second filter to nameSearch instead of nameSearch.position.

 ng-repeat="list in playerlist | filter:searchname | filter: nameSearch"

If you have search inputs with the same name as the object's attributes(eg:nameSearch.Position same as playerlist.Position), filtering just by the filter object(nameSearch) without the filter attribute(Position) will search mapping the respective attributes with same name.

UPDATE: The above will help you getting the Position dropdown search fixed.
For the name, use a custom filter as below.
Please note searchname is added as a filter in ng-repeat and keep your search input's ng-model a non object. For the below controller you would have to keep it as
<input class="search form-control" type="text" ng-model="nameSearch">

Controller:

$scope.searchname = function (row) {
        return (angular.lowercase(row.First).indexOf($scope.nameSearch || '') !== -1 || angular.lowercase(row.Last).indexOf($scope.nameSearch || '') !== -1);
    };

Hope this helped.

ui.bootstrap.typeahead plugin may be what you need:

http://angular-ui.github.io/bootstrap/

Screenshot: https://i.sstatic/VJenP.png

It adds an uib-typeahead attribute to the <input> tag.

A usage example:

<input type="text" ng-model="customPopupSelected" 
    placeholder="Custom popup template" 
    uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" 
    typeahead-popup-template-url="customPopupTemplate.html" 
    class="form-control">

Quotes from its documentation:

Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input.

It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. Supported expressions are:

label for value in sourceArray select as label for value in sourceArray The sourceArray expression can use a special $viewValue variable that >corresponds to the value entered inside the input.

This directive works with promises, meaning you can retrieve matches using the >$http service with minimal effort.

本文标签： javascriptAngular filter by text search and dropdownStack Overflow