无法使用select2从下拉列表（select）调用angularjs函数

I am hitting database on dropdown's on-change event. But i have to make tags after userselects any of them.

我在下拉列表的on-change事件上点击了数据库。但是我必须在用户选择其中任何一个后制作标签。

jsp file

<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 }},&nbsp; {{location.state}}, &nbsp;<b>{{location.country}}</option>
                         </select>

controller

$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();
});

if I have a input text and call searchLocation controller it works fine. but I cannot call from dropdown.

如果我有一个输入文本并调用searchLocation控制器它工作正常。但是我无法从下拉列表中拨打电话。

2 个解决方案

#1

<select id="multipleSelectLocation" data-placeholder="Select an option" ng-model="search" ng-change="searchlocation()" multiple="true" >

controlloer

$scope.searchlocation = function() {
   $scope.selected = $scope.search

}

#2

There is a AngularJS-native version of Select2 and Selectize, you should use that :

有一个AngularJS原生版本的Select2和Selectize,你应该使用它:

https://github.com/angular-ui/ui-select

Only thing to consider is ui-select uses on-select instead of ng-change

唯一需要考虑的是ui-select使用on-select而不是ng-change

Sample Snippet :

示例代码段:

  <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>

Controller :

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' }
  ];

});

#1

<select id="multipleSelectLocation" data-placeholder="Select an option" ng-model="search" ng-change="searchlocation()" multiple="true" >