2017-04-27 46 views
1

請在這裏幫我。我有個問題。我正在使用引導選擇選擇器選擇框。它是第一次完美地選擇。但問題是第二次選擇。第二次選擇下一個索引值。Bootstrap Selectpicker不能使用angularjs

例如: - 如果我第二次選擇C.這將選擇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'); 

         }); 
        } 
       } 
      }; 
     }); 

我使用以下版本的自舉選/1.10.0/js/bootstrap-select.min.js

請幫忙。

回答

2

這將工作。我認爲這是因爲角度插入了一個空值,與選定的索引混淆。修復這是爲了在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>

+1

拉夫塔瓦,非常感謝你。我注意到,我只是沒有添加這一行。 現在它正在工作。我感謝您的幫助。 – Shiva1281969

相關問題