我击中数据库上的下拉菜单的变化事件。但是我必须在用户选择它们之后制作标签。
jsp文件<select id="multipleSelectLocation" data-placeholder="Select an option" ng-model="search" ng-change="searchlocation(search)" multiple="true" >
<option value="1">Option 1</option>
<option value="2" ng-repeat="location in userLocationList"> {{ location.city }}, {{location.state}}, <b>{{location.country}}</option>
</select>
控制器$scope.searchlocation = function(search)
{
/*
if (search.length < 3) {
$scope.userLocationList = null;
return false;
}*/
$http.get(
location.protocol + '//' + location.host
+ contextPath + '/services/searchLocation', {
params : {
"search" : search
}
}).then(function(response) {
$scope.userLocationList = response.data;
if ($scope.userLocationList.length == 0) {
console.log('no location')
}
}, function(error) {
console.log("error while searching");
console.log(error);
});
}
$(document).ready(function() {
$("#multipleSelectLocation").select2();
});
如果我有一个输入文本并调用searchLocation控制器它工作得很好。但是我不能从下拉菜单中调用
<select id="multipleSelectLocation" data-placeholder="Select an option" ng-model="search" ng-change="searchlocation()" multiple="true" >
controlloer
$scope.searchlocation = function() {
$scope.selected = $scope.search
}
有一个angularjs原生版本的Select2和Selectize,你应该使用它:
https://github.com/angular-ui/ui-select唯一需要考虑的是ui-select
使用on-select
而不是ng-change
<ui-select multiple sortable="true" ng-model="ctrl.person.selected" theme="select2" class="form-control" title="Choose a person">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in ctrl.people | filter: $select.search">
<div ng-bind-html="item.name | highlight: $select.search"></div>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
控制器:
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {
var vm = this;
vm.people = [
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
{ name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
{ name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: 'nicolas@email.com', age: 43, country: 'Colombia' }
];
});