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
Post a Comment