I'm trying to turn a current select box (which currently have a lot of options) to a searchable select box, with a input inside it to make search and filtering easier.
The select box is a directive, and it's used in many places on the application.
My angular version: "angular": "1.3.20"
My bootstrap version: "angular-bootstrap": "~0.12.1"
Here's my code:
.directive('mySelector', function() {
return {
template: '<select
class="form-control"
ng-change="$parent.reloadOtherSelector(inputIdItem, afterList)"
ng-model="inputIdItem"
ng-options=\'e.id as (e.number + " - " + e.name) for e in $parent.getItems {{angularfilter}}\'
ng-required={{objectRequired}}
ng-disabled="allowModify == false">
<option value="">{{ $parent.labelItem }}</option>
</select>',
restrict: 'E',
scope : { inputIdItem: '=', inputIdOther: '=', afterList: '=', objectRequired: '=', allowModify: '=', listFilter: '='},
controller: function($scope){
$scope.$watch("inputIdItem", function(newValue, oldValue) {
if (!angular.isUndefined($scope.inputIdOther) && !angular.isUndefined(newValue) && !angular.isUndefined(oldValue))
$scope.inputIdOther = null;
});
$scope.angularfilter = $scope.listFilter ? (" | filter: " + JSON.stringify($scope.listFilter) + "") : "";
}
};
})
My suggestion would be to add an autocomplete to your input.
Here is an example - https://embed.plnkr.co/plunk/CU1K3O
If you not apposed to using material design there is a directive that you and add and filter your results from your html side. https://material.angularjs.org/latest/demo/autocomplete
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.