How do I filter items in a dropdown menu?
I have a scenario because I have to filter items in a dropdown based on the input given in a textbox. Is it possible how to do this? I tried with ng-change but it fails.
HTML code:
<input type="text" ng-model="somvar" ng-change="someFunc(somvar)" />
<div id="dropdown" class="dropdownClass">
<ul class="predtsct">
<li class="prfdwn" ng-repeat="list in countries| filter: somevar" ng-click="countryIdFunc(countriesLst.countryId)">{{list.countryName}}</li>
</ul>
</div>
+3
source to share
2 answers
From the fiddle I posted in the comments: the dropdown is no different from the normal list, except the style is different. This example uses Bootstrap to create the dropdown, but you can find many more examples if you google them.
Working version: https://jsfiddle.net/jorgthuijls/6gvp2z9h/
This is the whole view:
<div ng-controller="MyCtrl">
city: <input type="text" ng-model="search.city">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- the 'search' bit in the filter maps to the 'search' variable on $scope -->
<li ng-repeat="user in users | filter:search:strict">{{user.name}}, {{user.city}}</li>
</ul>
</div>
</div>
The controller is also pretty small:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.search = {};
$scope.search.city = 'new york';
$scope.users = [{
name: 'bob',
city: 'hong kong'
}, {
name: 'jack',
city: 'new york'
}, {
name: 'john',
city: 'new hampshire'
}]
}
+1
source to share