angularjs model doesnt get updated on select change -
i trying integrate angularjs , jquery chosen plugin, works fine when changed model doesnt updated can 1 tell me how go doing this, there video on youtube explains same dont have access youtube, highly appreciated
this html code:
<select id="categories" data-placeholder="select categories" chosen="categories" ng-model="categoriesselected" multiple="" ng-options="category.name category in categories"></select> <div ng-repeat="category in categoriesselected">{{category.name}}</div>
this angular code:
app.directive('chosen', function() { return { restrict : 'a', link : function(scope, element, attr) { console.log(attr); $("#" + attr.id).chosen(); scope.$watch(attr.chosen, function(oldval, newval) { $("#" + attr.id).trigger('chosen:updated'); }); scope.$watch(attr.ngmodel, function() { $("#" + attr.id).trigger('chosen:updated'); }); } }; }) app.controller("workbenchcontroller", function($scope, $http, workbenchservice) { $scope.categories = []; $scope.categoriesselected = []; workbenchservice.categorieslist().then(function(data) { $scope.categories = data; }) }
the reason might jquery plugins make dom modifications after angular application has been compiled, means angular app not able use element part of app (no ng-model, ng-show, etc element), reason must try not use jquery plugins angular directives way directive compile along side app , youll working expected.
a better aproach problem use ui-select
directive angular native select box works selectize, chosen or select2, more info , download here
and working plunker example here
Comments
Post a Comment