电商四十一、模板管理----认识select2和关联品牌、关联规格下拉列表（静态）

①模板管理----认识select2。

下拉列表，关联品牌和关联规格是下拉列表形式，而且这个下拉列表可以复选。也可以取消选择。可以利用select2组件来完成。

认识select2：

 第一种：

 

第二种：

 

 

第三种：

 

看引用select2需要引入的js和css：这里只是一部分。具体引入看项目。

 

②模板管理----品牌下拉列表（静态）

一、先写前端。修改type_template.html文件，引入select2的相关js和css（样式表）。

select2.css是select2本身的样式表，select2-bootstrap.css是select2样式表和bootstrap样式表整合后的样式表。所以select2-bootstrap.css样式表最好放在bootstrap.css样式表和select2.css样式表的后面。

同理：select2.min.js文件是select2本身的JavaScript文件。而angular-select2.js文件是angularjs和select2整合后的js文件。所以angular-select2.js文件应该放在angular.min.js文件（angularjs本身的JavaScript文件）和select2.min.js文件（select2本身的JavaScript文件）后面。而且因为用到了app。

 

因为用到app所以，必须放在base_pagination.js文件后面。因为在base_pagination.js文件后面才定义了app。

 

 

 

二、修改typeTemplateController.js 文件，定义品牌列表数据。新增一个变量。

注意select2对数据有要求：$scope.brandList = { data：[ ]}是将[ ]包在data里面，而不是$scope.brandList = [ ]。

从源码可以看出：

 

所以要求用data封装[ ]，且必须是id和text。{data：[ {id: ,text:   },{id: ,text:   },{id: ,text:   }..........]}

三、在type_template.html文件中用select2组件实现多选（复选）下拉框——————关联品牌多选（复选）下拉框。

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

multiple表示：可以多选（复选）。

config表示：下拉选框的数据来源。

select2-model（angularjs原生的是ng-model，这里是整合后的指令）表示：把多选（复选）后的数据提交给这个变量。也是一种绑定。注意：多选（复选）后的数据也是json格式。如格式：[{"id":16,"text":"TCL"},{"id":13,"text":"长虹"}}]

重点解释entity.brandIds

这个地方的entity是全局变量entity，全局变量entity在typeTemplateController.js文件中定义了。$scope.entity。

$scope.entity就是对应类TbTypeTemplate.java

$scope.entity.id、$scope.entity.name、$scope.entity.specIds、$scope.entity.brandIds、$scope.entity.customAtrributeItems。分别与类TbTypeTemplate中的属性值：id、name、specIds、brandIds和customAttributeItems对应。

值得区分的是：

这个entity即entity in list 里面的entity是局部变量。只在循环内部作用。

 

 

 

四、在type_template.html文件中用select2组件实现多选（复选）下拉框——————关联规格多选（复选）下拉框。

<input select2 select2-model="entity.specIds" config="specList" 
multiple   placeholder="选择规格（可多选）" class="form-control" type="text"/>

multiple表示：可以多选（复选）。

config表示：下拉选框的数据来源。

select2-model（angularjs原生的是ng-model，这里是整合后的指令）表示：把多选（复选）后的数据提交给这个变量。也是一种绑定。注意：多选（复选）后的数据也是json格式。如格式：[{"id":27,"text":"网络"},{"id":32,"text":"机身内存"}]。

五、测试