selectedvalue
赋值false,然后在rolelist中利用foreach方法对ownrolelist的每个角色进行匹配,如果是要默认勾选则赋值true,经过处理后的rolelist如图6所示。rolenameselected数组存的是最终勾选要被提交的角色id,如图6箭头所示。1 $http.post("xxxxx/fetchallprofilerole", params, function (data) { 2 $scope.rolelist = data.responsedata.data; 3 $http.post("xxxxx/fetchuserrole", formdata, function (data) { 4 $scope.ownrolelist = data.responsedata.data; 5 //对要默认勾选的角色做匹配 6 $scope.rolelist.foreach(function (item) { 7 item.selectedvalue=false; 8 $scope.ownrolelist.foreach(function (item1) { 9 if(item.roleid==item1.roleid){ 10 item.selectedvalue=true; 11 } 12 }) 13 }) 14 }); 15 });
item.selectedvalue=!item.selectedvalue;
使其效果取反。假设某个复选框初始化为勾选,之后点击一次该复选框,则item.selectedvalue为false,即ng-checked="false",页面显示不勾选。1 <div class="rolenamealldiv"> 2 <div ng-repeat="item in rolelist"> 3 <div class="rolenamedivctrl"> 4 <input type="checkbox" ng-click="rolenameselection1(item)" ng-checked="item.selectedvalue"/>{{item.rolename}} 5 </div> 6 </div> 7 </div>
js核心代码如下:
1 //click点击事件 2 $scope.rolenameselection1= function(item) { 3 item.selectedvalue=!item.selectedvalue; 4 }; 5 //rolenameselected数组存储的是角色复选框最终被选中的值,后面要请求提交 6 $scope.rolenameselected=[]; 7 $scope.rolesubmit=function(){ 8 console.log("rolelist:"+json.stringify($scope.rolelist)); 9 //对所有的值进行筛选,如果符合条件的,即符合item.selectedvalue==true的,则push进rolenameselected数组。 10 $scope.rolelist.foreach(function (item) { 11 if(item.selectedvalue==true){ 12 console.log("item.selectedvalue:"+item.selectedvalue); 13 $scope.rolenameselected.push(item.roleid); 14 } 15 }) 16 console.log("rolenameselected:"+json.stringify($scope.rolenameselected)); 17 //封装成后台需要的格式 18 var formdata = { 19 "puid": $scope.roleinfo.puid, 20 "roleid":$scope.rolenameselected 21 } 22 //必须要有选择,否则给出错误提示 23 if($scope.rolenameselected.length==0){ 24 $scope.errorflag1=true; 25 $scope.selectionerrormsg="至少选择一个角色"; 26 }else{ 27 console.log("formdata:"+json.stringify(formdata)) 28 $http.post("xxxxx", formdata, function (data) { 29 if(data){ 30 //todo 31 }else { 32 //todo 33 } 34 }); 35 } 36 }
后面网上也查到一种方法,也能起到勾选的作用,随便记录一下。 html页面复选框需要绑定ng-click="rolenameselection($event,item.roleid)"
事件和ng-checked="isselected(item.roleid
)" 事件
js核心代码如下:
1 $scope.rolenameselected=[]; 2 var rolenameselected = function(action, id) { 3 if(action == 'add' && $scope.rolenameselected.indexof(id) == -1) $scope.rolenameselected.push(id); 4 if(action == 'remove' && $scope.rolenameselected.indexof(id) != -1) $scope.rolenameselected.splice($scope.rolenameselected.indexof(id), 1); 5 }; 6 $scope.rolenameselection= function($event, id) { 7 var checkbox = $event.target; 8 var action = (checkbox.checked ? 'add' : 'remove'); 9 rolenameselected(action, id); 10 }; 11 $scope.isselected = function(id) { 12 return $scope.rolenameselected.indexof(id) >= 0; 13 };
其主要思想为通过给click绑定一个事件,给这个方法传入一个id,这个参数通过action决定这个角色add
或者remove
出rolenameselected数组。over
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论