[英]Cannot call angularjs function from dropdown(select) using select2
我在下拉菜單的變更事件中訪問數據庫。 但是我必須在用戶選擇其中任何一個之后制作標簽。
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" >
控制層
$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' }
];
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.