1. 程式人生 > >angular和bootstrap實現checkbox的點選全選事件

angular和bootstrap實現checkbox的點選全選事件

1、angular檔案

app.controller('繫結控制器名稱',['$scope',
	function($scope){		
		$scope.checked  = [];
		$scope.toggleCheck = function(id,$index,event)
		{
			if(event.target.nodeName != 'INPUT' && event.target.nodeName != 'SPAN')
				return;
			//判斷是否已經選中
			var isset = $scope.checked.indexOf(id);	//返回首次出現的位置
			if(isset === -1)
			{
				$scope.checked.push(id);	//沒有選中,則把當前的id放到checked變數裡面
			}
			else{
				$scope.checked.splice(isset,1); //選中,則刪除checked中的id
				$scope.selectAll = false;	//置空全選狀態
			}
			//選中的長度是否等於全部資料的長度
			if($scope.checked.length == $scope.datas.length)
			{
				$scope.selectAll = true;
			}
			else
			{
				$scope.selectAll = false;
			}
		}

		//全選按鈕事件
		$scope.checkAll = function(event)
		{
			event.stopPropagation();//阻止當前事件在DOM樹上冒泡
			if(event.target.nodeName != 'INPUT' && event.target.nodeName != 'TD' && event.target.nodeName != 'SPAN' && even.target.nodeName != 'STRONG') 					return;
			//清空所有
			$scope.checked = [];
			$scope.selectAll = !$scope.selectAll;
			if($scope.selectAll)	//不選中的狀態時,遍歷追加到到checked陣列中
			{
				angular.forEach($scope.datas,function(item,i)
				{
					$scope.checked.push(item.id);
				}
			}
		};
]);

2、html檔案

<table>
	<tr style="font-weight: bold" ng-click="checkAll($event)" class="tr-a">
		<td>
			<label class="checkbox-inline i-checks">
				<input type="checkbox" ng-checked="selectAll"/> <i></i>
				<b>全選</b>
			</label>
		</td>
	</tr>
	<tr>
		<td ng-click="toggleCheck({{id}},$index,$event)">
			<label class="checkbox-inline i-checks">
				<input type="checkbox" ng-checked="checked.indexOf(data.id) > -1 "><i></i>
			</label>
		</td>
	</tr>
</table>