json - Angularjs not working in bootstrap selectpicker -


i creating web application using bootstrap selectpicker select.. using angularjs populate select picker.. have 2 select content of 1 populated based in first select value without reloading.. able work without selectpicker while doesn't work when selectpicker used.. code is

<div class="form-group" data-ng-controller="mark_entry_controller">     <div class="row">         <div class="col-md-6  " style="margin-top: 7px;">             <label>select class</label>         </div>         <div class="col-md-6 text-center">             <select class="form-control" title="select class"                  name="fromclass" ng-change="exam_list_json(fromclass)"                 ng-model="fromclass"                 ng-options="fromclass.id fromclass.course + ' ' + fromclass.section fromclass in all_class">                 </select>         </div>     </div>     <div class="row" style="height: 10px"></div>     <div class="row">         <div class="col-md-6  " style="margin-top: 7px;">             <label>select examination</label>         </div>         <div class="col-md-6 text-center" >             <select class="form-control" name="examination"                 ng-change="subject_list_in_exam_json()"                 ng-model="examination"                 ng-options="examination.id examination.name examination in exam_list"></select>         </div>     </div> 

and controller is

<script>     function mark_entry_controller($scope, $http) {         $http.get("<%=request.getcontextpath()%>/all_class_json?aadvisorid=${uid}").success(function(response) {                         $scope.all_class = response;                         $scope.exam_list_json = function(id){         $http.get("<%=request.getcontextpath()%>/exam_list_json?fromclass="+id)                                 .success(function(response) {                                     $scope.exam_list = response;                                     $scope.$apply();                             });                         }                      });     } </script> 

here in controller list of data obtained json file using json format.. please me out..

the bootstrap-select hides selectors , data selector comes later execution of command $('select').selectpicker().

but how solve problem?

i had similar problem:

<select class="fontsize" data-style="btn-info" name="fontsize" ng-controller="fontsize">     <option data-ng-repeat="size in sizes" name="{{size}}" value="{{size}}">{{size}}</option> </select> 

and controller

app.controller('fontsize', function($scope, $http) {     $http.get("/getselector/font-size")         .success(function(response) {             $scope.sizes = response.records;             // todo: how refresh selectpicker after changing of scope?         }); }); 

you can refresh selectpicker after data have been received:

$scope.$watch(function() {     $('.fontsize').selectpicker('refresh'); }); 

ok, hope helpful you.


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -