Kann angularjs Funktion nicht aus Dropdown aufrufen (select) mit select2

Question

Ich treffe Datenbank auf Dropdown-On-Change-Ereignis. Aber ich muss Tags nach dem Benutzer machen, wählt einen von ihnen aus.

jsp Datei

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

, wenn ich einen Eingabetext und rufen searchLocation Controller haben es funktioniert gut. aber ich kann nicht vom Dropdown aufrufen.

Answer 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 

} 

Answer 2

Es gibt eine AngularJS-native Version von Select2 und Selectize, sollten Sie diese wählen:

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

Das einzige, was zu beachten ist, ui-select Anwendungen on-select anstelle von ng-change

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

});