2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 多选框实现全选_Angular1.x-checkbox-全选amp;单选amp;多选

多选框实现全选_Angular1.x-checkbox-全选amp;单选amp;多选

时间:2022-05-24 20:30:21

相关推荐

多选框实现全选_Angular1.x-checkbox-全选amp;单选amp;多选

ng-checked:Angular里ng-checked属性影响复选框的状态,值=>true则复选框选中,值=>false则取消选中。

HTML:

<div class="col-lg-4"><fieldset><legend>选题列表</legend><div class="table-responsive" style="border:0px;padding:3px;padding:0px;height:550px;overflow-y:scroll;"><table class="table table-bordered table-striped"><thead><tr><th><input type="checkbox" ng-checked="isAllSelect" ng-click="selectAll($event)" /></th><th>序号</th><th>题目</th></tr></thead><tbody><tr ng-repeat="x in viewModel.measureTableTopicInfos"><td><input type="checkbox" ng-model="x.isChecked" ng-click="onchecked(x,$event)" ng-checked="x.isChecked"></td><th scope="row">{{$index+1}}</th><td>{{x.title}}</td></tr></tbody></table></div></fieldset></div>

Js部分:

//复选框事件$scope.onchecked = function (obj, evn) {var list = [];if (evn.target.checked) {angular.forEach($scope.viewModel.measureTableTopicInfos, function (value, key) {if (value.isChecked == true) {list.push(value.code);}});} else {angular.forEach($scope.viewModel.measureTableTopicInfos, function (value, key) {if (value.isChecked == true) {list.push(value.code);}});}//清空数组......//全选按钮是否选中......}//全选$scope.selectAll = function ($event) {//如果全选了if ($event.target.checked) {var list = [];$scope.isAllSelect = true;angular.forEach($scope.viewModel.measureTableTopicInfos, function (value, key) {list.push(value.code);value.isChecked = true; //全部设置成全选});$scope.viewModel.measureTableDivisorTopicInfos.splice(0, $scope.viewModel.measureTableDivisorTopicInfos.length);for (var i = 0; i < list.length; i++) {//......业务Code}} else {$scope.isAllSelect = false;angular.forEach($scope.vm.viewModel.measureTableTopicInfos, function (value, key) {value.isChecked = false; //全部设置成不选});}}

简单粗暴的实现!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。