您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)angular如何實現(xiàn)一個列表的選擇全選交互組件的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
需求分析
實現(xiàn)單選;
實現(xiàn)全選;
可以設(shè)置允許多選還是單選。如果多選,有最大選擇數(shù)限制;
實現(xiàn)跨頁選擇。這里的跨頁選擇指的是切換到下一頁后,還能記住上一頁的選擇。以前我們遇到的選擇往往都是只記住當前頁,一旦刷新就清空了。這是一個不同的地方;
要求自己定義UI及交互觸發(fā);
設(shè)計思路
這里其實是相同的地方就是選擇的交互邏輯,所以重點考慮如何封裝這個邏輯。這里的交互邏輯主要是: 2. 點擊全選; 3. 點擊列表item的選擇切換。如果是單選,要清空之前的選擇;如果是多選,要檢查是否超過最大選擇限制;
再來看一下應(yīng)用場景相同的地方。我們將設(shè)定上下文肯定有一個list數(shù)組,一個已選數(shù)組。 因此,我們得到如下的指令。
moSelect指令
封裝全選邏輯的指令。適應(yīng)場景:
有一個list集合;
每一個item是一個對象;
跨頁選擇;
使用方式
<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、主要通過三個指令實現(xiàn)全選相關(guān)的代碼封裝;
2、mo-select 是容器指令,定義了全選,以及單選 item 的方法,定義在列表容器dom上;
mo-select的 值是scope的 list 對象,與 ng-repeat 里的 items 一致;
item-name :告訴指令,每一項的對象名,指令會通過該名稱在每一項的scope里查找。與ng-repeat里的 item 一致;
select-all-name :全選的狀態(tài)變量。默認: isSelectedAll
item-select-name : 記錄的每一項對象是否選中的變量名,將會存儲在 item 對象上,為了避免與現(xiàn)有業(yè)務(wù)字段重合,可以配置,也可以不配置,默認: select ;
selected-list-name :已選對象列表的變量名。默認: selectedList ;
init-selected-list :初始化選擇對象列表。該變量只用于初始化,類似 vue 組件里的 prop 屬性;
allow-multiple-select :是否允許多選;
select-count-limit :如果允許多選,最多可以選擇多少個。如果不傳,則無限;
item-equal-func :對象判等函數(shù),用于封裝業(yè)務(wù)對象自己的判等原則。比如:有些場景是根據(jù)id,有些是根據(jù)其他業(yè)務(wù)邏輯。如果不傳,默認根據(jù)對象的id屬性;
3、mo-select-all 全選指令。定義在全選 dom 上,一版是一個 input checkbox 。其值表示在當前scope保存的是否全選的變量名;
4、mo-select-single 單選指令。 定義在每一項 dom 上??梢杂袃蓚€地方:
定義在自己的 input chebox 上
定義在 input 的容器上。類似 tr ,實現(xiàn)點擊整行選中。也可以定義在某個單個元素上。
如果要獲取已選項,直接在當前scope獲取 selected-list-name 指定的變量名即可。
使用步驟:
在容器定義 mo-select ,根據(jù)實際需求,配置相關(guān)參數(shù)。必須: mo-select , item-name ;
在需要全選的按鈕 dom 上添加 mo-select-all 指令,不需要配置任何參數(shù);
在 ng-repeat 的單項模板里,在需要添加單選交互的 dom 上添加 mo-select-single 指令,不需要配置任何參數(shù);
完成配置。
注意事項
mo-select 的值一定要和ng-repeat的 items 一致;
item-name 的值一定要和ng-repeat的 item 一致;
總結(jié)
這樣的指令在我們的業(yè)務(wù)開發(fā)中使用還是很靈活的。可能看起來配置項有點麻煩,其實大多數(shù)都是可以采用默認值的。我們看看它的不同表現(xiàn)形式:
感謝各位的閱讀!關(guān)于“angular如何實現(xiàn)一個列表的選擇全選交互組件”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。