This page Angular effect to achieve, Vue can also be implemented in accordance with its general process, the core essence has not changed.
Function effect: page initialization effects have all roles checkbox is checked by default initialization requirements of the role to be recognized by the check, then, can submit a request made in accordance with a final check of the state.
Function effect: page initialization effects have all roles checkbox is checked by default initialization requirements of the role to be recognized by the check, then, can submit a request made in accordance with a final check of the state.
First to see the effect: you can see the role of this initial page the user is given only one "Accounting Manager", as shown in Figure 1 red box, click on the "assigned role" button to enter assign roles page. Into the initial page, the page can be seen that the two requests initiated: fetchAllProfileRole and fetchUserRole, red frame 2 as shown in FIG. fetchAllProfileRole request that all the characters, fetchUserRole request that role has been given on the need to check the default role. The left side of the page can also see "Accounting Manager" The role of the check box is checked.
The role of the initial page of Figure 1 is only a Accounting Manager
2 Assign roles page request initiated fetchAllProfileRole and fetchUserRole
Figure 3 fetchUserRole request is required default role checked, this refers to accounting managers.
Now we have to conduct a test, we checked a "Advanced Search" in the role, and then submit it to return to the initial page when the user already has found these two roles, as shown in Fig. Click on "Assign Roles" button again, found that "accounting managers" and "Advanced Search" two roles checkbox is checked, the left side of the box shown in Figure 5. As a result, we achieved the desired function.
4 The user is given the "Accounting Manager" and "Advanced Search" two roles
5 "Accounting Manager" and "Advanced Search" check box is checked by default
roleList is stored in all roles, ownRoleList stored is checked by default to all roles, give all roleList all the attributes of the role
selectedValue
assigned false, then for each role ownRoleList matches forEach method in use in roleList, If the default is to check the assignment true, through roleList processed as shown in FIG. roleNameSelected character array is stored id final check to be submitted, as shown by the arrows.
And FIG. 6 roleList array roleNameSelected
Js initialization part:
. 1 $ http.post ( "xxxxx / fetchAllProfileRole", the params, function (Data) { 2 $ scope.roleList = data.responseData.data; . 3 $ http.post ( "xxxxx / fetchUserRole", formData, function (Data) { . 4 $ scope.ownRoleList = data.responseData.data; . 5 // to be checked to make matching default role . 6 $ scope.roleList.forEach ( function (Item) { . 7 item.selectedValue = to false ; . 8 $ scope.ownRoleList. forEach ( function (ITEM1) { . 9 IF (== item.roleIditem1.roleId){ 10 item.selectedValue=true; 11 } 12 }) 13 }) 14 }); 15 });
Initialized when the value is true when ng-checked will default check box. Every ng-click event listener clicks,
item.selectedValue=!item.selectedValue;
so the effect negated. Suppose a box to check initialization, then click on the check box once, then
item.selectedValue
is
false
, that is, ng-checked = "false", page display is not checked.
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 core code is as follows:
. 1 // the Click click event 2 $ scope.roleNameSelection1 = function (Item) { . 3 item.selectedValue =! Item.selectedValue; . 4 }; . 5 // roleNameSelected box character array is stored in the final selected value, back to request is submitted . 6 $ scope.roleNameSelected = []; . 7 $ scope.roleSubmit = function () { . 8 the console.log ( "roleList:" + the JSON.stringify ($ scope.roleList)); . 9 // for all values of screening, if eligible, that is in line with item.selectedValue == true, then push into the roleNameSelected array. 10 $ scope.roleList.forEach ( function (Item) { . 11 IF(== item.selectedValue to true ) { 12 is the console.log ( "item.selectedValue:" + item.selectedValue); 13 is $ scope.roleNameSelected.push (item.roleId); 14 } 15 }) 16 the console.log ( " roleNameSelected: "+ the JSON.stringify ($ scope.roleNameSelected)); . 17 // packaged into the format required by the background 18 is var formData = { . 19 " PUID " : $ scope.roleInfo.puId, 20 is " roleId " : $ scope.roleNameSelected 21 } 22 // must be selected, otherwise an error message will 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 }
Behind the Internet has found a way, can also play a role check, just record it. html page check and bind the ng-click="roleNameSelection($event,item.roleId)"event and ng-the checked = "isSelected ( item.roleId)" event
js core code is as follows:
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 };
The main idea is to bind an event by giving click, this method to pass a id, this parameter decided by the action of this role addor removea roleNameSelected array. over