Angular/Vue多复选框勾选问题
功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交发请求。





selectedValue
赋值false,然后在roleList中利用forEach方法对ownRoleList的每个角色进行匹配,如果是要默认勾选则赋值true,经过处理后的roleList如图6所示。roleNameSelected数组存的是最终勾选要被提交的角色id,如图6箭头所示。
$http.post("XXXXX/fetchAllProfileRole", params, function (data) {
$scope.roleList = data.responseData.data;
$http.post("XXXXX/fetchUserRole", formData, function (data) {
$scope.ownRoleList = data.responseData.data;
//对要默认勾选的角色做匹配
$scope.roleList.forEach(function (item) {
item.selectedValue=false;
$scope.ownRoleList.forEach(function (item1) {
if(item.roleId==item1.roleId){
item.selectedValue=true;
}
})
})
});
});
item.selectedValue=!item.selectedValue;
使其效果取反。假设某个复选框初始化为勾选,之后点击一次该复选框,则item.selectedValue为false,即ng-checked="false",页面显示不勾选。<div class="roleNameAllDiv">
<div ng-repeat="item in roleList">
<div class="roleNameDivCtrl">
<input type="checkbox" ng-click="roleNameSelection1(item)" ng-checked="item.selectedValue"/>{{item.roleName}}
</div>
</div>
</div>
js核心代码如下:
//click点击事件
$scope.roleNameSelection1= function(item) {
item.selectedValue=!item.selectedValue;
};
//roleNameSelected数组存储的是角色复选框最终被选中的值,后面要请求提交
$scope.roleNameSelected=[];
$scope.roleSubmit=function(){
console.log("roleList:"+JSON.stringify($scope.roleList));
//对所有的值进行筛选,如果符合条件的,即符合item.selectedValue==true的,则push进roleNameSelected数组。
$scope.roleList.forEach(function (item) {
if(item.selectedValue==true){
console.log("item.selectedValue:"+item.selectedValue);
$scope.roleNameSelected.push(item.roleId);
}
})
console.log("roleNameSelected:"+JSON.stringify($scope.roleNameSelected));
//封装成后台需要的格式
var formData = {
"puId": $scope.roleInfo.puId,
"roleId":$scope.roleNameSelected
}
//必须要有选择,否则给出错误提示
if($scope.roleNameSelected.length==0){
$scope.errorFlag1=true;
$scope.selectionErrorMsg="至少选择一个角色";
}else{
console.log("formData:"+JSON.stringify(formData))
$http.post("XXXXX", formData, function (data) {
if(data){
//ToDo
}else {
//ToDo
}
});
}
}
后面网上也查到一种方法,也能起到勾选的作用,随便记录一下。 html页面复选框需要绑定ng-click="roleNameSelection($event,item.roleId)"
事件和ng-checked="isSelected(item.roleId
)" 事件
js核心代码如下:
$scope.roleNameSelected=[];
var roleNameSelected = function(action, id) {
if(action == 'add' && $scope.roleNameSelected.indexOf(id) == -1) $scope.roleNameSelected.push(id);
if(action == 'remove' && $scope.roleNameSelected.indexOf(id) != -1) $scope.roleNameSelected.splice($scope.roleNameSelected.indexOf(id), 1);
};
$scope.roleNameSelection= function($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
roleNameSelected(action, id);
};
$scope.isSelected = function(id) {
return $scope.roleNameSelected.indexOf(id) >= 0;
};
其主要思想为通过给click绑定一个事件,给这个方法传入一个id,这个参数通过action决定这个角色add
或者remove
出roleNameSelected数组。over
Angular/Vue多复选框勾选问题的更多相关文章
- 关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案
前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决 ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- JavaScript小例子:复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- toFixed()精度丢失;复选框全选、取消
一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...
随机推荐
- Node.js之模块机制
> 文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 对数据库表中一列或多列的值进行排序 为什么要用索引? 索引能极大的减少存储引擎需要扫描的数据量 索引可以把随机IO变成顺序IO 索引可以帮助我们进行分 ...
- 将maven项目到入到idea中
一,前言 在文章将maven项目导入到eclipse中中我将新建的项目到入到了eclipse中了,因为最近也在尝试idea,那么就顺便也到入idea中. maven项目的话,我就使用在文章使用命令行创 ...
- win10下安装npm&cnpm步骤
1.node官网下载安装包 2.分别输入node -v,npm -v检查是否完成 3.配置npm的全局模块的存放路径以及cache的路径,新建node_global和node_cache文件,以下是我 ...
- 性能优化:虚拟列表,如何渲染10万条数据的dom,页面同时不卡顿
列表大概有2万条数据,又不让做成分页,如果页面直接渲染2万条数据,在一些低配电脑上可能会照成页面卡死,基于这个需求,我们来手写一个虚拟列表 思路 列表中固定只显示少量的数据,比如60条 在列表滚动的时 ...
- Spring Data JPA 梳理 - 使用方法
1.下载需要的包. 需要先 下载Spring Data JPA 的发布包(需要同时下载 Spring Data Commons 和 Spring Data JPA 两个发布包,Commons 是 Sp ...
- 站内搜索(ELK)之数据表字典类型字段的索引思路
数据表字典类型的字段,如人员表中的“性别”.流程表中的“处理状态”,此类字段中的值高度重复,不建议放到可检索的索引字段中,原因如下: 若数据表字典类型字段的值索引到单独的索引字段中,因字典数据字符数一 ...
- SOFAJRaft—初次使用
SOFAJRaft-初次使用 SOFAJRaft 是基于 Raft 算法的生产级高性能 Java 实现,支持 MULTI-RAFT-GROUP.应用场景有 Leader 选举.分布式锁服务.高可靠的元 ...
- asp.net编译中出现 数据库 'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\test1.mdf' 已存在。请选择其他数据库名称。
关于asp.net编译中出现数据库 'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\test1.mdf ...
- C# HttpWebRequest 后台调用接口上传大文件以及其他参数
直接上代码,包各位看客能用!!! 1.首先请求参数的封装 /// <summary> /// 上传文件 - 请求参数类 /// </summary> public class ...