1.angular分页插件pagination.js
- 引入angular,bootstrap,pagination等
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css"/>
- HTML代码
<tm-pagination conf="paginationConf"></tm-pagination>
- pagination配置
$scope.paginationConf = {
currentPage:1,
totalItems:10,
itemsPerPage:10,
perPageOptions:[10, 20, 30, 40, 50],
onChange: function() {
}
};
- 效果
![pagination](https://i-blog.csdnimg.cn/blog_migrate/a1c0008b8842dc4eb7cd7a29a30b04ca.png)
2. select2
- 引入angular,bootstrap,select2等
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<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/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../plugins/select2/angular-select2.js"></script>
- 修改typeTemplateController.js ,定义品牌列表数据
$scope.brandList = {data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'中兴'}]};
- HTML代码
<input select2 select2-model="entity.brandIds"
config="brandList" multiple placeholder="选择品牌(可多选)"
class="form-control" type="text"/>
说明:
select2:表示多选下拉框
config:数据来源
select2-model:把选择的数据提交到这个变量上
mutiple:可多选,没有则只能单选
- 效果
![select2](https://i-blog.csdnimg.cn/blog_migrate/623f6d8747702f10f758c25cb66011d8.png)