開發業務后臺經常要用到表格里的選擇，全選這種交互。而且不同系統不同場景的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>                <th>播放</th>              </tr>            </thead>            <tbody>              <tr ng-repeat="item in list" mo-select-single >                <td>                   <input type="checkbox" ng-checked="item.select" mo-select-single1 >                 </td>                <td>{{item.name}}</td>                <td>{{item.tel}}</td>                <td>{{item.addr}}</td>                <td>{{item.updateTime|msDateFormat:'YYYY-MM-DD'}}</td>                <td>                  <div audio-playable="item.url" play-trigger=".audio-play" pause-trigger=".audio-pause">                    <button class="btn btn-primary audio-play" ng-show="!audioInfo.playing" >播放</button>                    <button class="btn btn-primary audio-pause" ng-show="audioInfo.playing" >暫停</button>                  </div>                </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，這里分享出來，代碼鏈接。 有興趣要改進的同學可以拿去隨便改。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。