Angularjs not working in bootstrap selectpicker

Question

I am creating a web application where i am using bootstrap selectpicker for select.. But i am using angularjs to populate the select picker.. I have 2 select where the content of one is populated based in first select value without reloading.. I am able to work it perfectly without selectpicker while it doesn't work when a selectpicker is used.. my 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 as fromClass.course + ' ' + fromClass.section for 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 as examination.name for 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 the List of data is obtained from a json file using json format.. Please help me out..

Silerra · Accepted Answer · 2015-08-28 16:49:54Z

9

The bootstrap-select hides all selectors and the data for selector comes much later as the execution of the command $('select').selectpicker().

But how to solve the problem?

I had a 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 my controller

app.controller('fontSize', function($scope, $http) {
    $http.get("/getSelector/font-size")
        .success(function(response) {
            $scope.sizes = response.records;
            // TODO: How to refresh the selectpicker after changing of scope?
        });
});

You can refresh the selectpicker after the data have been received:

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

Ok, I hope this is helpful for you.

answered Aug 28, 2015 at 16:49

Silerra

3084 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ellockie Over a year ago

Is it possible without dependency on jQuery?

Silerra Over a year ago

The bootstrap selectpicker requires jQuery and this is a jQuery plugin. Now I'm wondering why don't want to use jQuery?

Silerra Over a year ago

Anyway, no I have found another clue: "If calling bootstrap-select via JavaScript, you will need to wrap your code in a $(document).ready() block or place it at the bottom of the page (after the last instance of bootstrap-select)." Well I have not tested that yet. That might be the better or the 'right' solution.

Collectives™ on Stack Overflow

Angularjs not working in bootstrap selectpicker

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related