AnglarJS（四)select2插件使用

1.导入依赖

基于bootstrap，anglarJS的select2使用

<!--select2 css引入-->
<link rel="stylesheet" href="../select2/select2.css" />
<link rel="stylesheet" href="../select2/select2-bootstrap.css" />

<!-- select2插件js -->
<!--select2、angularJS整合插件-->
<script type="text/javascript"
    src="../select2/angular-select2.js"></script>
    <!--select2 相关js-->
<script type="text/javascript" src="../select2/select2.min.js"></script>

2、select2支持4种绑定方式

            <!--
                select2:select2插件
                ng-model：支持ng-model数据绑定
                select2-model="aS2" ：select2 绑定对象
                config="config1" ：数据源，实际开发时，我们一般会调用控制层方法获得，这里引用静态数据
                multiple：支持多选，会绑定为数组

            -->

<div class="col-sm-6 col-sm-offset-3">
                <div class="page-header">
                    <h1 class="text-center">select2 directive</h1>
                </div>
                <h4>1. 支持动态ng-model</h4>
                <span class="text-muted">ng-model:</span> {{ a }}
                <br/>
                <span class="text-muted">select2-model:</span> {{ aS2 | json }}
                <input select2 ng-model="a" select2-model="aS2" config="config1" class="form-control" type="text"/>
                <br/>
                <button ng-click="aS2 = {id:4,text:'wontfix'}" class="btn btn-success btn-sm pull-right">设置数据</button>
                <span class="clearfix"></span>
                <hr/>





                <h4>2. 支持select标签</h4>
                <span class="text-muted">ng-model:</span> {{ b }}
                <br/>
                <select select2 ng-model="b" class="form-control" placeholder="我也有placeholder">
                    <option value="1">数据1</option>
                    <option value="2">数据2</option>
                    <option value="3">数据3</option>
                    <option value="4">数据4</option>
                    <option value="{{ item.id }}" ng-repeat="item in config2">{{ item.text }}</option>
                </select>
                <br/>
                <button ng-click="b = 3" class="btn btn-success btn-sm pull-right">设置数据</button>
                <span class="clearfix"></span>
                <hr/>


                <!---->
                <h4>3. 支持自定义配置及多选（与select2原生的配置方式一致）</h4>
                <span class="text-muted">ng-model:</span> {{ c }}
                <br/>
                <span class="text-muted">select2-model:</span> {{ cS2 | json }}
                <input select2 ng-model="c" select2-model="cS2" config="config3" multiple placeholder="支持多选哦" class="form-control" type="text"/>
                <br/>
                <button ng-click="cS2 = [{id:3,text:'invalid'},{id:4,text:'wontfix'}]" class="btn btn-success btn-sm pull-right">设置数据</button>
                <span class="clearfix"></span>
                <hr/>




                <h4>4. 支持ajax（这也是一个自定义内置配置的例子）</h4>
                <span class="text-muted">ng-model:</span> {{ d }}
                <br/>
                <span class="text-muted">select2-model:</span> {{ dS2 | json }}
                <input select2 ng-model="d" select2-model="dS2" config="default" query="testAJAX" placeholder="ajax数据得在服务器环境下查看" class="form-control" type="text"/>
                <br/>
                <button ng-click="dS2 = {id: '462983441', title: 'Ocean Thirteen'}" class="btn btn-success btn-sm pull-right">设置数据</button>
                <span class="clearfix"></span>
            </div>