Question

请在这里帮助我。我有个问题。我正在使用bootstrap select picker for select box。它是第一次完美选择。但问题是第二次选择。它第二次选择下一个索引值。

例如： - 如果我第二次选择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');

                        });
                    }
                }
            };
        });

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

请帮忙。

Answer 1

这会奏效。我认为它发生了，因为angular插入一个空值，这会搞乱所选索引。解决方法是在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>

Bootstrap Selectpicker无法使用angularjs

1 个答案: