Bootstrap Selectpicker arbeitet nicht mit angularjs

Question

Bitte helfen Sie mir hier. Ich habe ein Problem. Ich benutze Bootstrap-Select-Picker für Select-Box. Es wählt das erste Mal perfekt aus. Aber das Problem ist die zweite Auswahl. Zum zweiten Mal wählt es den nächsten Indexwert aus.

ZB: - Wenn ich C zweites Mal wähle. Es wählt 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'); 

         }); 
        } 
       } 
      }; 
     }); 

Ich verwende die folgende Version von Bootstrap-select /1.10.0/js/bootstrap-select.min.js

Bitte helfen Sie.

Answer 1

Dies wird funktionieren. Ich denke, es geschah, weil eckig einen leeren Wert einfügt, der mit dem ausgewählten Index in Verlegenheit gebracht wurde. Die Lösung bestand darin, einen leeren Wert in select einzufügen.

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>