组件使用

1.angular分页插件pagination.js

1. 引入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"/>

2. HTML代码

<tm-pagination conf="paginationConf"></tm-pagination>

3. pagination配置

// 分页控件配置
$scope.paginationConf = {
	currentPage:1,// 当前页
	totalItems:10,// 总记录数
	itemsPerPage:10,// 每页显示的记录数
	perPageOptions:[10, 20, 30, 40, 50],// 分页选项
	onChange: function() {
		//操作
	}
};

4. 效果

2. select2

1. 引入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>
<!-- angular-select2要放在定义app的js文件下面，因为使用到了angular app组件 -->
<script type="text/javascript" src="../plugins/select2/angular-select2.js"></script>
<!-- angualar-select2结束 -->

2. 修改typeTemplateController.js ，定义品牌列表数据

$scope.brandList = {data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'中兴'}]};

3. HTML代码

<input select2  select2-model="entity.brandIds" 
	config="brandList" multiple placeholder="选择品牌（可多选）" 
	class="form-control" type="text"/>

说明：
	select2：表示多选下拉框
	config：数据来源
	select2-model：把选择的数据提交到这个变量上
	mutiple：可多选，没有则只能单选

4. 效果