Bootstrap Selectpicker not working with angularjs

Question

Please help me here. I have a problem. I am using bootstrap select picker for select box. It is selecting first time perfectly. But the problem is second time selection. For second time it is selecting next index value.

Eg:- If I choose C second time. It will select D

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="FirstCtrl">
    <select class="form-control nya-selectpicker selectpicker" name="subapp1"  
                data-live-search="true" ng-model="subappID" ng-
                ng-options="subapp.ID as subapp.DESCRIPCION for subapp in subapplicationList"  
                data-select-watcher data-last="{{$last}}"  >

        </select>

</div>

       var myapp = angular.module('myapp', []);
       myapp.controller('FirstCtrl', function ($scope) {
       $scope.subapplicationList = [
       {"ID" :  9 ,"DESCRIPCION" : "a" },
       {"ID" :  1 ,"DESCRIPCION" : "b" },
       {"ID" :  2 ,"DESCRIPCION" : "c" },
       {"ID" :  3 ,"DESCRIPCION" : "d" },
       {"ID" :  4 ,"DESCRIPCION" : "e" },
       {"ID" :  5 ,"DESCRIPCION" : "f" },
       {"ID" :  6 ,"DESCRIPCION" : "g" },
       {"ID" :  7 ,"DESCRIPCION" : "h" },
       {"ID" :  8 ,"DESCRIPCION" : "i" }
      ];
    });

        myapp.directive('selectWatcher', function ($timeout) {
            return {
                link: function (scope, element, attr) {
                    var last = attr.last;
                    if (last === "true") {
                        $timeout(function () {
                            $(element).parent().selectpicker('val', 1);
                            $(element).parent().selectpicker('refresh');

                        });
                    }
                }
            };
        });

I am using the following version of bootstrap-select /1.10.0/js/bootstrap-select.min.js

Please help.

Gaurav Srivastava · Accepted Answer · 2017-04-27 09:44:53Z

2

This will work. I think it was happening because angular inserts an empty value which was messing with the selected index. the fix was this to insert an empty value in select.

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.subappID = 9;
  $scope.subapplicationList = [{
      "ID":9,
      "DESCRIPCION": "a"
    },
    {
      "ID": 1,
      "DESCRIPCION": "b"
    },
    {
      "ID": 2,
      "DESCRIPCION": "c"
    },
    {
      "ID": 3,
      "DESCRIPCION": "d"
    },
    {
      "ID": 4,
      "DESCRIPCION": "e"
    },
    {
      "ID": 5,
      "DESCRIPCION": "f"
    },
    {
      "ID": 6,
      "DESCRIPCION": "g"
    },
    {
      "ID": 7,
      "DESCRIPCION": "h"
    },
    {
      "ID": 8,
      "DESCRIPCION": "i"
    }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="FirstCtrl">

  <select class="form-control nya-selectpicker selectpicker" name="subapp1" data-live-search="true" ng-model="subappID"  ng-options="subapp.ID as subapp.DESCRIPCION for subapp in subapplicationList">
<option value="">Select</option>
</select>

</div>

answered Apr 27, 2017 at 9:44

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

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

1 Comment

Shiva1281969 Over a year ago

Gaurav Srivastava, Thank you very much. I have noticed that I just did not add this line. <option value="">Select</option> Now it is working. I appreciate your help.

Collectives™ on Stack Overflow

Bootstrap Selectpicker not working with angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related