Bootstrap 选择器无法与 angularjs 一起使用

Question

请帮帮我。我有个问题。我正在为 select 框使用 bootstrap select 选择器。这是 select 第一次完美。但是问题是第二次selection。第二次是 selecting 下一个索引值。

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

                        });
                    }
                }
            };
        });

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

请帮忙。

Answer 1

这行得通。我认为这是因为 angular 插入了一个与 selected 索引混淆的空值。解决方法是在 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 选择器无法与 angularjs 一起使用

Bootstrap Selectpicker not working with angularjs

angularjs

bootstrap-selectpicker