angular如何實(shí)現(xiàn)一個(gè)列表的選擇全選交互組件

            
              
                
                商戶名稱
                電話
                地點(diǎn)
                更新時(shí)間
                播放
              
            
            
              
                
                    
                
                {{item.name}}
                {{item.tel}}
                {{item.addr}}
                {{item.updateTime|msDateFormat:'YYYY-MM-DD'}}
                
                  
                    播放
                    暫停
                  

說(shuō)明：

1、主要通過三個(gè)指令實(shí)現(xiàn)全選相關(guān)的代碼封裝；

2、mo-select 是容器指令，定義了全選，以及單選 item 的方法，定義在列表容器dom上；

1. mo-select的 值是scope的 list 對(duì)象，與 ng-repeat 里的 items 一致；

2. item-name ：告訴指令，每一項(xiàng)的對(duì)象名，指令會(huì)通過該名稱在每一項(xiàng)的scope里查找。與ng-repeat里的 item 一致；

3. select-all-name :全選的狀態(tài)變量。默認(rèn)： isSelectedAll

4. item-select-name : 記錄的每一項(xiàng)對(duì)象是否選中的變量名，將會(huì)存儲(chǔ)在 item 對(duì)象上，為了避免與現(xiàn)有業(yè)務(wù)字段重合，可以配置，也可以不配置，默認(rèn)： select ；

5. selected-list-name :已選對(duì)象列表的變量名。默認(rèn)： selectedList ；

6. init-selected-list ：初始化選擇對(duì)象列表。該變量只用于初始化，類似 vue 組件里的 prop 屬性；

7. allow-multiple-select :是否允許多選；

8. select-count-limit ：如果允許多選，最多可以選擇多少個(gè)。如果不傳，則無(wú)限；

9. item-equal-func ：對(duì)象判等函數(shù)，用于封裝業(yè)務(wù)對(duì)象自己的判等原則。比如：有些場(chǎng)景是根據(jù)id，有些是根據(jù)其他業(yè)務(wù)邏輯。如果不傳，默認(rèn)根據(jù)對(duì)象的id屬性；

3、mo-select-all 全選指令。定義在全選 dom 上，一版是一個(gè) input checkbox 。其值表示在當(dāng)前scope保存的是否全選的變量名；
4、mo-select-single 單選指令。 定義在每一項(xiàng) dom 上。可以有兩個(gè)地方：

1. 定義在自己的 input chebox 上

2. 定義在 input 的容器上。類似 tr ，實(shí)現(xiàn)點(diǎn)擊整行選中。也可以定義在某個(gè)單個(gè)元素上。

如果要獲取已選項(xiàng)，直接在當(dāng)前scope獲取 selected-list-name 指定的變量名即可。

使用步驟：

1. 在容器定義 mo-select ，根據(jù)實(shí)際需求，配置相關(guān)參數(shù)。必須： mo-select ， item-name ;

2. 在需要全選的按鈕 dom 上添加 mo-select-all 指令，不需要配置任何參數(shù)；

3. 在 ng-repeat 的單項(xiàng)模板里，在需要添加單選交互的 dom 上添加 mo-select-single 指令，不需要配置任何參數(shù)；

4. 完成配置。

注意事項(xiàng)

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

2. item-name 的值一定要和ng-repeat的 item 一致；

總結(jié)

這樣的指令在我們的業(yè)務(wù)開發(fā)中使用還是很靈活的。可能看起來(lái)配置項(xiàng)有點(diǎn)麻煩，其實(shí)大多數(shù)都是可以采用默認(rèn)值的。我們看看它的不同表現(xiàn)形式：

感謝各位的閱讀！關(guān)于“angular如何實(shí)現(xiàn)一個(gè)列表的選擇全選交互組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！