2017年7月4日，我原本可以像其他同時一樣早點回家，玩幾把王者榮耀，但是我沒有，因為我選擇留下來，寫一篇博客。
項目中經常性的會遇到什么點擊“全選”按鈕，勾中所有“單選按鈕”，當所有單選按鈕勾選后，全選按鈕自動勾選，這里我并不是想說這是多么難的一個事情，我只是想炫耀下自己寫的東西。
（勾選與否，是切換類名來實現的）換一個背景圖片而已
1）頁面內容（靜態頁）
<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代碼
首先當然有一個參數數組，用于經營經營渲染頁面：
$scope.dataList=[ {'chineseName':'百度科技'，'englishName':'baidukeji','abbreviation'：'小度','idTell':'bd'}, {'chineseName':'小牛科技'，'englishName':'xiaoniukeji','abbreviation'：'小牛','idTell':'xn'}, {'chineseName':'京東科技'，'englishName':'jdkeji','abbreviation'：'小京','idTell':'xj'}, {'chineseName':'順風科技'，'englishName':'sfkeji','abbreviation'：'小風','idTell':'xf'}, {'chineseName':'阿里科技'，'englishName':'alkeji','abbreviation'：'小里','idTell':'xl'}, {'chineseName':'淘寶科技'，'englishName':'tbkeji','abbreviation'：'小寶','idTell':'xb'}, {'chineseName':'天貓科技'，'englishName':'tmkeji','abbreviation'：'小貓','idTell':'xm'}];定義一個數組用于存儲，選中的選項
$scope.targetChoice=[];
定義一個很簡單的方法：用于操作單選，全選的效果實現
$scope.clicktarget=function(isAllChoiceBtn,tmp,dataList){ //isAllChoiceBtn:用于表示用戶點擊的是否是全選按鈕，tmp:是數據集合中的一個數據對象 var count=0;//記錄被選中的子選項的個數 //說明用戶點擊的不是“全選”按鈕 isAllChoiceBtn==false?(function(){ //當前選項取反 $scope.targetChoice[tmp.idTell]=!$scope.targetChoice[tmp.idTell]; //遍歷數據集合，統計已經被購中的單選項 angular.foreach(dataList,function(v,k){ $scope.targetChoice[v.idTell]&& count++; }); //如果count等于數據集合得長度，說明所有的單選被購中 count==dataList.length && $scope.allHasChoice=true:$scope.allHasChoice==false; })() //說明點擊的"全選"按鈕 ：(function(){ $scope.allHasChoice=！$scope.allHasChoice;//狀態取反 $scope.allHasChoice==false? //說明取消全選 ：angular.forEach(dataList,function(v,k){ $scope.targetChoice[v.idTell]=$scope.allHasChoice; count=0; }) //說明選中全選 :angular.forEach(dataList,function(v,k){ $scope.targetChioce[v.idTell]=$scope.allHasChoice; count++; }); })()}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
