2017年7月4日,我原本可以像其他同時(shí)一樣早點(diǎn)回家,玩幾把王者榮耀,但是我沒有,因?yàn)槲疫x擇留下來,寫一篇博客。
項(xiàng)目中經(jīng)常性的會(huì)遇到什么點(diǎn)擊“全選”按鈕,勾中所有“單選按鈕”,當(dāng)所有單選按鈕勾選后,全選按鈕自動(dòng)勾選,這里我并不是想說這是多么難的一個(gè)事情,我只是想炫耀下自己寫的東西。
(勾選與否,是切換類名來實(shí)現(xiàn)的)換一個(gè)背景圖片而已
1)頁面內(nèi)容(靜態(tài)頁)
<ul class='list-inline my-list-inline'> <li class="action-check" ng-class="{'active':allHasChoice}" ng-click="clicktarget(true,tmp,dataList)"> <li>中文名稱</li> <li>英文名稱</li> <li>申請人類型</li><ul><div class="list-data"><table> <tbody> <tr ng-repeat="tmp in dataList track by tmp.idTell" ng-class="{true:'active',false:''}[targetChoice[tmp.idTell]==true]" ng-click="ctmlicktarget(false,tmp,dataList)" > <td> <span class="choice-icon"></span> <span class="company-name over-flow-handel-style" title="{{tmp.chineseName}}" ng-bind="tmp.cineseName"></span> </td> <td> <span class="english-name over-flow-handel-style" title="{{tmp.englishName}}" ng-bind="tmp.englishName"></span> </td> <td> <span class="english-name over-flow-handel-style" title="{{tmp.abbreviation}}" ng-bind="tmp.abbreviation"></span> </td> </tr> </tbody></table>2)js代碼
首先當(dāng)然有一個(gè)參數(shù)數(shù)組,用于經(jīng)營經(jīng)營渲染頁面:
$scope.dataList=[ {'chineseName':'百度科技','englishName':'baidukeji','abbreviation':'小度','idTell':'bd'}, {'chineseName':'小牛科技','englishName':'xiaoniukeji','abbreviation':'小牛','idTell':'xn'}, {'chineseName':'京東科技','englishName':'jdkeji','abbreviation':'小京','idTell':'xj'}, {'chineseName':'順風(fēng)科技','englishName':'sfkeji','abbreviation':'小風(fēng)','idTell':'xf'}, {'chineseName':'阿里科技','englishName':'alkeji','abbreviation':'小里','idTell':'xl'}, {'chineseName':'淘寶科技','englishName':'tbkeji','abbreviation':'小寶','idTell':'xb'}, {'chineseName':'天貓科技','englishName':'tmkeji','abbreviation':'小貓','idTell':'xm'}];定義一個(gè)數(shù)組用于存儲(chǔ),選中的選項(xiàng)
$scope.targetChoice=[];
定義一個(gè)很簡單的方法:用于操作單選,全選的效果實(shí)現(xiàn)
新聞熱點(diǎn)
疑難解答
圖片精選