AngularJS 中Select2组件的使用

  • 2019-12-29
  • 59
  • 0

前言

最近准备使用java写一个博客系统.目前正在后台创作阶段.

刚好做下拉框选择时,使用的Angularjs+select2实现.

js依赖

  <!-- 注意此JS的文件位置.  -->
  <link rel="stylesheet" href="/plugins/select2/select2.css" />
  <link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css" />
  <script src="/plugins/select2/select2.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="/plugins/select2/angular-select2.js"></script>

使用总结

下拉单选

单选效果:

选定后效果:

html页面中的源码:

<div class="form-group col-md-12">
    <label for="category">分类</label>
           <div class="form-controls">
                 <input select2  select2-model="entity.categorySelect" config="categoryList" placeholder="选择分类" class="form-control" type="text"/>
           </div>
</div>

说明: config是select2的配置参数,我们查询数据库后,返回的可选列表,需要赋值给 config的变量.

config参数格式如下: {data:[]}

$scope.categoryList = {data:[{id:1,text:"分类1"},{id:2,text:"分类2"},...]

当我们在页面点击选择后,select2-model绑定的变量就可以接受到被选择的数据,数据格式:

{id:1,text:""}


下拉多选

多选效果:

多选后效果:

页面源码:

<div class="form-group col-md-12">
     <label for="tags">标签</label>
            <div class="form-controls">
                 <input select2  select2-model="entity.tagList" config="tagList" placeholder="选择标签(可多选)" multiple class="form-control" type="text"/>
             </div>
</div>

页面加载的时候,绑定到config的数据格式和上面一致.

数据格式: {data:[]}

tagList赋初值:

$scope.tagList = {data:[{id:1,text:"tag1"},{id:2,text:"tag2"},{id:3,text:"tag3"}]};

页面选择多选之后,拿到的数据格式:
[{id:1,text:"tag1"},{id:3,text:"tag3"}]

0

评论

还没有任何评论,你来说两句吧