Bootstrap SelectPickerがangularjsと連携していません

Question

ここをクリックしてください。私は問題があります。選択ボックスにブートストラップ選択ピッカーを使用しています。それは初めての完全な選択です。しかし、問題は2回目の選択です。 2度目は、次のインデックス値を選択します。

例： - Cを2回選択した場合。それは私が次のバージョンを使用しています

<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'); 

         }); 
        } 
       } 
      }; 
     }); 

Dを選択しますブートストラップ・セレクト/1.10.0/js/bootstrap-select.min.js

助けてください。

Answer 1

これは動作します。私はそれが起こっていたと思う角度は、選択されたインデックスを乱していた空の値を挿入します。この修正は、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>