AngularJs搭配Bootstrap-select的防坑指南

一、前因

公司的项目早就上线了，现在正处于逐步的优化当中，其中有一个就是关于下拉框的优化。因为随着公司业务的开展，进驻的经销商已经有上百家了，而普通的下拉框对选取某一个经销商着实有一定的效率低下，因此需要优化。由于网上大多数都是JQuery与boorstrap-select的搭配应用，与angularjs之间的搭配较少，因此想着写一篇拙劣的指南，如有错误，还请不吝指教！

转载请注明出处！

优化之前的样子

优化之前的html代码：

<select ng-disabled="isDisabledBranch" id="branchId" class="form-control "  ng-model="vm.branchId"
        ng-options="item.branchCode as (item.branchCode+'-'+item.branchName) for item in branchList" >
    <option value="">请选择经销商</option>
</select>

优化之后的样子——带有模糊搜索筛查的功能。

优化之后的html代码：

<select ng-disabled="isDisabledBranch" id="branchId" class="form-control selectpicker" data-live-search="true" 
        ng-model="vm.branchId"
        ng-options="item.branchCode as (item.branchCode+'-'+item.branchName) for item in branchList" >
    <option value="">请选择经销商</option>
</select>

二、实现步骤

1.下载bootstrap-select插件

官网：http://silviomoreto.github.io/bootstrap-select/（由于官网大多数情况下是打不开的，本人都是在某一时刻突然打开了官网才下下来的。）

鉴于以上情况，给大家贴一个百度网盘的：https://pan.baidu.com/s/1fvpVAtd4JAAH7xeQuQNiTg    密码：yrsh

2.需要的引用（这些都是必须的，其他的就自己看着办了）

<link rel="stylesheet" href="dist/test/css/bootstrap.min.css">(3.3.4版本。3.3.6的版本会有冲突，下拉框无法正常显示。慎用！)
<link rel="stylesheet" href="dist/test/css/bootstrap-select.css">(bootstrap-select-1.12.4)
<script src="dist/test/js/jquery.js"></script>(都可以)
<script src="dist/test/js/bootstrap.min.js"></script>
<script src="dist/test/js/bootstrap-select.js"></script>
<script src="angular/angular.js"></script>(1.6.*版本，比较落后了。)

3.实现

做完以上的，就可以直接使用bootstrap-select了。

三、关于bootstrap-select的属性介绍

1.selectpicker

只添加selectpicker这个class属性值，可实现普通的下拉框功能，没啥区别。title的作用与palcehoder一样。

<select class="selectpicker" title="请选择城市名称">
    <option>香港xg</option>
    <option>重庆cq</option>
    <option>北京bj</option>
    <option>上海sh</option>
    <option>深圳sz</option>
</select>

2.multiple

selectpicker和multiple属性的搭配使用可实现多选

<select class="selectpicker" multiple>
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

3.data-live-search="true"

这个属性的默认值是false,作用是打开模糊筛查搜索框。

普通实现的html代码

<select class="selectpicker" multiple data-live-search="true">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

效果：

选项分组

<select class="form-control selectpicker" data-live-search="true" multiple>
        <optgroup label="广东省">
                <option value="1">广州市</option>
                <option value="2">深圳市</option>
                <option value="3">珠海市</option>
         </optgroup>   
          <optgroup label="广西">
                  <option value="1">南宁市</option>
                  <option value="2">柳州</option>
                  <option value="3">桂林市</option>
           </optgroup>  
           <optgroup label="山东">
                   <option value="1">烟台</option>
                   <option value="2">青岛</option>
                   <option value="3">济南</option>
             </optgroup>                          
</select>

效果：

4.data-max-options

这个属性表示最多可选几个，是需要搭配multiple属性一起使用的，用法：data-max-options=“2”，表示最多选两个。

5.data-selected-text-format

缩略模式，用法：data-selected-text-format="count > 3"，当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效。

效果：

6.data-style

表示默认选中样式，这个我没试过，用法：data-style="btn-primary"，属性值就是bootstrap的按钮样式。

7.data-size

data-size="6",表示下拉框显示的下拉列表数量。

8.data-dropup-auto=""

data-dropup-auto="false"，表示下拉框默认向下展开；"true"，表示下拉框默认向下展开；"auto"，表示下拉框根据页面尺寸自动向下或向上展开，"auto"是data-dropup-auto的默认值。

9.其他用法

全选：$('.selectpicker').selectpicker('selectAll');

反选：$('.selectpicker').selectpicker('deselectAll');

适应手机模式：$('.selectpicker').selectpicker('mobile');

效果：

还有其他多种玩法，等以后有时间，并且自己玩过了再更（不过估计不得了）

以上图片来源：https://www.cnblogs.com/landeanfen/p/7457283.html

四，与AngularJs的搭配使用（脱坑必看）

1.脱坑第一步

因为angularjs的下拉框，几乎都不会显示的在html文件中写出<option value="1">XXX</option>

大多数情况下，都是采用的ng-options指令，循环出选项，并装填到<option value="">。。。</option>标签中。

此时再使用上诉的方式在页面显示的效果为：

即下拉框无法显示出选项，但实际上，按下F12去查看时，又明显的有这些选项值，只是页面无法展示。

脱坑方案第一步

在页面中添加Js：

$(function () {
   //此两句代码必不可少，一句都不能缺，先后顺序也不能换，这是血的教训啊。
    $('.selectpicker').selectpicker('refresh');
    $('.selectpicker').selectpicker('render');
});

但是这种做法，只有在编译之后第一次进入页面的时候生效，一旦刷新之后就失效了。具体原因，是涉及到了angularjs的异步加载的问题。

脱坑方案第二步

将上面的代码，放在下拉框遍历的集合之前执行，eg：

ng-options="item.branchCode as (item.branchCode+'-'+item.branchName) for item in branchList"

即，需要在branchList加载完成之前执行。此时就需要将$('.selectpicker').selectpicker('refresh'); $('.selectpicker').selectpicker('render');放到对应的Controller中，则能完美解决问题。

代码：

SysBranchService.getEffectDealerList().then(function (response) {
    $(function () {
        $('.selectpicker').selectpicker('refresh');
        $('.selectpicker').selectpicker('render');
    });
    $scope.branchList = response;
});

注：一定不能使用$object此种方法进行异步加载。即：$scope.branchList = SysBranchService.getEffectDealerList().$object;

then方法的加载机制是必须等待获取完所有返回值之后才会进行下一步操作，而$object是一边执行下面的操作，一边等待返回值。因此也会造成下拉框的选项时有时无。

2.脱坑第二步

警告：如果遇到表单验证required，ng-required，则required，ng-required将会失效！

因此若是需要表单验证的话，千万不要使用此种方式，需要另辟蹊径。

另外，若有朋友解决了这个问题，还请不吝赐教，在下先谢了。

3.脱坑第三步

在angularjs中，可能会遇到选择之后数据不能回显，但实际上数据是进入了数据库的。此时需要进行初始化赋值，即当页面需要的数据全部加载完之后，给下拉框赋初始值。

如下所示：

$(function () {

                           //从数据库查回来的值
                            var valArea='string:'+$scope.item.sysBranch.areaId;
                            var valPost='string:'+$scope.item.sysBranch.parentId;
                            var valBank='string:'+$scope.item.sysBranchDealer.bankId;

                    //给下拉框赋初始值   .selectpicker:eq(0)表示该页面或者该表单的第几个使用了第几个selectpicker属性的input标签
                            $('.selectpicker:eq(0)').selectpicker('val',valArea);
                            $('.selectpicker:eq(1)').selectpicker('val',valPost);
                            $('.selectpicker:eq(2)').selectpicker('val',valBank);
                            $('.selectpicker').selectpicker('refresh');
                            $('.selectpicker').selectpicker('render');
                        });