问题
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.
回答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>
回答2:
You should use the filter option from ng-repeat, here is an example for you to check, I hope this help you.
回答3:
Here u can find custom filter for dropdown and search
i hope this Code will help with something new way !
回答4:
here is my crack at this http://jsfiddle.net/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
回答5:
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.
回答6:
ui.bootstrap.typeahead plugin may be what you need:
http://angular-ui.github.io/bootstrap/
Screenshot:
https://i.stack.imgur.com/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.
来源：https://stackoverflow.com/questions/32218231/angular-filter-by-text-search-and-dropdown