0

I have implemented a searchable dropdown using this library (https://select2.github.io/), its works fine but i can't get the ng-model value when the button is clicked.

 <select ng-model="destination_name" class="js-example-basic-single form-control" >
                         <option selected disabled>Choose</option>
                         <?php foreach ($all_dest as $value): ?>
                             <option value="<?=$value->id?>"><?=$value->destination_name?></option>
                          <?php endforeach; ?>
                     </select>
<input type="button" ng-click="addDest(destination_name)" value="{{btnTxt}}" name="add" class="btn btn-primary pull-right"/>

jquery for searchable dropdown

 $(document).ready(function() {
        $(".js-example-basic-single").select2();
    });

Angular js code

$scope.addDest=function (value) {
        alert(value);

}

here addDest is the function that passes the selected value in the dropdown menu when the button is clicked I will get undefined even if an item is selected.

NOTE

when i hide the jquery part it provides the searchable dropdown menu i will get the ng-model value. I think its the problem with jquery part.

Blessan Kurien
  • 1,645
  • 9
  • 31
  • 63
  • If you share the whole code, that would be helpful.. As a general answer, if the view is manipulated directly with external library, AngularJS binding may not work properly. Check this out: http://stackoverflow.com/questions/17159652/is-there-a-way-to-watch-attribute-changes-triggered-from-outside-the-angular-wor – bilgec Sep 09 '16 at 11:21

1 Answers1

1

Best solution - use https://github.com/angular-ui/ui-select instead of your select.

Next solution - write wrapper directive and sync scope with select via

$scope.$apply();

on select2 change event;

Valery Kozlov
  • 1,557
  • 2
  • 11
  • 19