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

Question

我在下拉菜单的变更事件中访问数据库。 但是我必须在用户选择其中任何一个之后制作标签。

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 }},&nbsp; {{location.state}}, &nbsp;<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控制器，则效果很好。 但我无法通过下拉菜单致电。

Answer 1

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

控制层

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

}

Answer 2

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

});