以angular的思路寫一個列表的選擇全選交互組件

開發業務後臺常常要用到表格裏的選擇，全選這種交互。並且不一樣系統不一樣場景的UI還不同。好比：表格裏就是簡簡單單的checkbox；圖片列表這種，UI設計師會搞點花樣，用戶選擇一下，會在圖片上蓋一層半透明的勾選提示等等。咱們的系統是用angular 1.X版本開發。因此，我採用angular的裝飾性指令編寫幾個指令，把它們配合在一塊兒使用，來封裝這樣的場景。這與以前咱們遇到的組件的開發思路又不太同樣。咱們先來分析一下需求及擴展點。

需求分析

1. 實現單選；
2. 實現全選；
3. 能夠設置容許多選仍是單選。若是多選，有最大選擇數限制；
4. 實現跨頁選擇。這裏的跨頁選擇指的是切換到下一頁後，還能記住上一頁的選擇。之前咱們遇到的選擇每每都是隻記住當前頁，一旦刷新就清空了。這是一個不一樣的地方；
5. 要求本身定義UI及交互觸發；

設計思路

1. 這裏實際上是相同的地方就是選擇的交互邏輯，因此重點考慮如何封裝這個邏輯。這裏的交互邏輯主要是： 2. 點擊全選； 3. 點擊列表item的選擇切換。若是是單選，要清空以前的選擇；若是是多選，要檢查是否超過最大選擇限制；
2. 再來看一下應用場景相同的地方。咱們將設定上下文確定有一個list數組，一個已選數組。 所以，咱們獲得以下的指令。

moSelect指令

封裝全選邏輯的指令。適應場景：

1. 有一個list集合；
2. 每個item是一個對象；
3. 跨頁選擇；

使用方式

<table  mo-select="list"  select-all-name="isSelectedAll" item-name="item" item-select-name="select" selected-list-name="selectedList" init-selected-list="initSelectedList" allow-multiple-select="false" select-count-limit="2" item-equal-func="itemEqual">
                        <thead>
                            <tr>
                                <th><input type="checkbox" ng-checked="isSelectedAll" mo-select-all></th>
                                <th>商戶名稱</th>
                                <th>電話</th>
                                <th>地點</th>
                                <th>更新時間</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in list" mo-select-single >
                                <td>
                                     <input type="checkbox" ng-checked="item.select"  mo-select-single > 
                                </td>
                                <td>{{item.name}}</td>
                                <td>{{item.tel}}</td>
                                <td>{{item.addr}}</td>
                                <td>{{item.updateTime|dateFormat:'YYYY-MM-DD'}}</td>
                                
                            </tr>
                        </tbody>

                    </table>
複製代碼

說明：

1. 主要經過三個指令實現全選相關的代碼封裝；
2. mo-select 是容器指令，定義了全選，以及單選item的方法，定義在列表容器dom上；
   1. mo-select的值是scope的list對象，與ng-repeat裏的items一致；
   2. item-name：告訴指令，每一項的對象名，指令會經過該名稱在每一項的scope裏查找。與ng-repeat裏的item一致；
   3. select-all-name:全選的狀態變量。默認：isSelectedAll
   4. item-select-name: 記錄的每一項對象是否選中的變量名，將會存儲在item對象上，爲了不與現有業務字段重合，能夠配置，也能夠不配置，默認：select；
   5. selected-list-name:已選對象列表的變量名。默認：selectedList；
   6. init-selected-list：初始化選擇對象列表。該變量只用於初始化，相似vue 組件裏的prop屬性；
   7. allow-multiple-select:是否容許多選；
   8. select-count-limit：若是容許多選，最多能夠選擇多少個。若是不傳，則無限；
   9. item-equal-func：對象判等函數，用於封裝業務對象本身的判等原則。好比：有些場景是根據id，有些是根據其餘業務邏輯。若是不傳，默認根據對象的id屬性；
3. mo-select-all 全選指令。定義在全選dom上，一版是一個input checkbox。其值表示在當前scope保存的是否全選的變量名；
4. mo-select-single 單選指令。 定義在每一項dom上。能夠有兩個地方：
   1. 定義在本身的input chebox上
   2. 定義在input的容器上。相似tr，實現點擊整行選中。也能夠定義在某個單個元素上。

若是要獲取已選項，直接在當前scope獲取selected-list-name指定的變量名便可。

使用步驟：

1. 在容器定義mo-select，根據實際需求，配置相關參數。必須：mo-select，item-name;
2. 在須要全選的按鈕dom上添加mo-select-all指令，不須要配置任何參數；
3. 在ng-repeat的單項模板裏，在須要添加單選交互的dom上添加mo-select-single指令，不須要配置任何參數；
4. 完成配置。

注意事項

1. mo-select的值必定要和ng-repeat的items一致；
2. item-name的值必定要和ng-repeat的item一致；

總結

這樣的指令在咱們的業務開發中使用仍是很靈活的。可能看起來配置項有點麻煩，其實大多數都是能夠採用默認值的。咱們看看它的不一樣表現形式：

代碼很少，200來行，代碼是從項目裏摘出來的，不是很複雜，就沒作demo，這裏分享出來，代碼連接。有興趣要改進的同窗能夠拿去隨便改。