项目常用功能模块(2)-ngRepeat 动态生成表单下的全选/单选

最新推荐文章于 2023-10-12 19:25:13 发布

mingqingyuefeng

最新推荐文章于 2023-10-12 19:25:13 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS 常用功能模块文章标签： javascript angular

本文链接：https://blog.youkuaiyun.com/mingqingyuefeng/article/details/78195081

angularJS 同时被 2 个专栏收录

40 篇文章

订阅专栏

常用功能模块

3 篇文章

订阅专栏

本文介绍了一个使用HTML创建表格并通过AngularJS实现全选和单选功能的例子。通过具体的代码展示了如何在表格中使用复选框进行数据选择，并在JavaScript中实现选择状态的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试后HTML，

<table class="table table-condensed" id="QueryTab" style="background:#E0FFFF;">
						<thead>
							<tr>
								<th width="10px"><input type="checkbox"	ng-click="checkAll()" ng-model="box.totalState"/></th>
								<th>主题</th>
								<th>条件</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="data in filterSel track by $index">
								<td><input type="checkbox" ng-click="checkOne()" ng-init="$parent.box.state[$index]=false" ng-model="$parent.box.state[$index]"/></td>
								<td>{{data.theme}}</td>
								<td>{{data.condition[0].key}}</td>
							</tr>
						</tbody>
					</table>

好，js，

/**
	 *全选、单选
	 */
	$scope.box={};
	$scope.checkAll=function(){
			for(var key in $scope.box.state){
				$scope.box.state[key]=$scope.box.totalState;
			}
	}
	$scope.checkOne=function(){
		console.log($scope.box);
		for(var key in $scope.box.state){
			if($scope.box.state[key]==false){
				$scope.box.totalState=false;
				return;
			}
		}
		$scope.box.totalState=true;
	}

结束