品優購商城項目（二）AngularJS、自動代碼生成器、select2下拉多選框

品優購商城想項目第二階段 AngularJS、自動代碼生成器、select2下拉多選框

完成了課程第三天、第四天的的任務。

1、學習了AngularJs前端的mvc分層思想，js部分分成controller和service層，並且可以繼承，調用。代碼層次非常清晰。

2、掌握了 自動代碼生成工具HeimaCodeUtil_V2.4_32 可以選擇生成多種結構的代碼，對於簡單的后台增刪改查足夠用了。使用該工具首先測試數據庫連接，然后再選擇數據庫進入頁面，選擇生成類型。最后把生成的文件copy到項目中調用即可。

再此對培訓機構有了一個正確的認識，特別是黑馬，非常牛皮。這個代碼自動生成器就是他們的傑作，這里不再展示因為是別人的版權。

3、在逆向工程生成的代碼中，處理多表關聯的業務思想是：把關聯的表生成一個組合類，即組合類包含關聯的類。在業務層使用Criteria關聯操作。注意生成的組合類也必須實現序列化，實體類同是如此，否則報錯。

4、接觸了新的前端控件select2，可以實現下拉框多選，並且雙向數據綁定。這讓我想到layui框架select無法綁定change事件，是我不會用還是根本不支持，待驗證。select2需要引用相應的文件

<linkrel="stylesheet"href="../plugins/select2/select2.css"/>

<linkrel="stylesheet"href="../plugins/select2/select2-bootstrap.css"/>

<scriptsrc="../plugins/select2/select2.min.js"type="text/javascript"></script>

<scripttype="text/javascript"src="../js/angular-select2.js"></script>

 select2使用

<input select2 select2-model="entity.brandIds"  config="brandList" multiple placeholder=" 選擇品牌（可多選） " class="form-control">

multiple 表示可多選

Config用於配置數據來源

select2-model用於指定用戶選擇后提交的變量

下面是select2相關的技術資料地址，有時間去研究。

=================
## 不再維護了，僅做存檔

angularjs封裝的select2（支持任意版本的select2）

* 支持動態ng-model
* 支持select標簽
* 支持自定義配置及多選（與select2原生的配置方式一致）
* 支持ajax
* 支持自定義內置配置

具體使用請下載源碼，打開index.html查看。
![demo頁面](http://think2011.qiniudn.com/angularjs-select2.png)

---
> ##### 技術： angularjs + jquery + select2
> ##### 時間： 2014年5月
> ##### 博客： [think2011](http://think2011.github.io)
> ##### 源碼： [select2](http://ivaynberg.github.io/select2/)
> ##### 源碼： [angularjs-select2（當前頁面就是）](https://github.com/think2011/angularjs-select2.git)