각도 / 뷰 멀티 체크 박스 문제

　　이 페이지 뷰 각도 효과는 또한 일반적인 방법에 따라 구현 될 수 있고, 달성 코어 본질은 변하지 않았다.
　　효과 기능 : 페이지 초기화 효과가 모든 역할 체크 박스가 체크 인식 할 수 있도록 역할의 기본 초기화 요구 사항에 의해 확인되고 있고, 다음 상태의 최종 점검에 따라 만든 요청을 제출할 수 있습니다.

　　당신은 그림 1 빨간색 상자와 같이 사용자가 단 하나의 "회계 관리자"주어진이 초기 페이지의 역할을 볼 수있는 역할 페이지를 할당 입력 "할당 된 역할"버튼을 클릭 : 먼저 효과를 볼 수 있습니다. fetchAllProfileRole 및 fetchUserRole도 같이 빨간색 프레임 2 : 초기 페이지에, 페이지는 두 개의 요청이 시작된 것을 알 수있다. 모든 문자, fetchUserRole 그 역할을 요청 fetchAllProfileRole 요청은 기본 역할을 확인해야 할 필요성에 주어졌다. 페이지의 왼쪽은 "회계 관리자"확인란의 역할이 선택되어 볼 수 있습니다.

그림 1의 초기 페이지의 역할은 단지 회계 관리자입니다

 

2 지정 역할 페이지 요청은 fetchAllProfileRole 및 fetchUserRole을 시작

 

그림 3 fetchUserRole 요청이 기본 역할이 확인 필요,이 회계 관리자를 의미합니다.

 

　　이제 우리는 시험을 실시해야한다, 우리는 역할의 "고급 검색"을 선택하고 사용자가 이미이 두 가지 역할을 발견 한 경우도대로, 초기 페이지로 돌아 제출합니다. "역할 할당"버튼을 클릭하여 다시, "회계 관리자"와 "고급 검색"확인란이 선택되어 두 가지 역할은, 상자의 왼쪽 그림 5에 표시된 것을 발견했다. 그 결과, 원하는 기능을 달성했다.

4 사용자는 "회계 관리자"및 "고급 검색"두 가지 역할 부여

5 "회계 관리자"및 "고급 검색"확인란은 기본적으로 선택되어 있습니다

 

　　의 RoleList 모든 역할에 모든 역할에 저장 ownRoleList 기본적으로 선택되어 저장되고, 역할 모두의 RoleList 모든 속성 부여 selectedValue 거짓 할당을, 다음 각 역할에 대해 ownRoleList가의 RoleList에 사용 foreach는 방법과 일치, 기본 처리의 RoleList 통해 진정한 할당을 확인하는 경우도있다. 제출 화살표로 나타내는 바와 같이 roleNameSelected 문자 배열은 최종 검사 ID를 저장한다.

도.도 6의 RoleList 배열 roleNameSelected

JS 초기화 부분 :

. 1 $ http.post ( "xxxxx는 / fetchAllProfileRole」라고 PARAMS, 기능 (데이터) {
 2      $ scope.roleList = data.responseData.data]
 . 3      $ http.post ("xxxxx는 / fetchUserRole "formData, 기능 (데이터) {
 . 4          $ scope.ownRoleList = data.responseData.data]
 . 5          //이 일치 기본 역할을하게 검사 할 
. 6          $ scope.roleList.forEach ( 함수 (아이템) {
 7.              item.selectedValue = false로 ]
 . 8              $ scope.ownRoleList. 대해 forEach ( 함수 (ITEM1) {
 . 9                  IF (== item.roleIditem1.roleId) {
 10                      item.selectedValue = 참 ;
11                  }
 12              })
 (13)          })
 14      });
15 });

코드보기

 

　　체크 박스를 기본값으로-확인 NG 때 값에 해당하는 경우 초기화. 모든 NG 클릭 이벤트 리스너는 클릭, item.selectedValue=!item.selectedValue; 그래서 효과가 무효화. 초기화를 확인하는 상자를 가정 한 후 다음 번 체크 박스를 클릭 item.selectedValue이 있다 거짓 , 즉, = NG-확인 "거짓은"페이지 표시가 선택되어 있지 않습니다.

1  < DIV 클래스 = "roleNameAllDiv" > 
2      < DIV에 NG-반복 = "의 RoleList의 항목 ' > 
3          < DIV 클래스 ="roleNameDivCtrl " > 
4              < 입력 타입 ="체크 박스 " NG 클릭 "roleNameSelection1 (항목)'=를 NG -checked = "item.selectedValue" /> {{}} item.roleName
 5          </ DIV > 
6      </ DIV > 
7  </ DIV >

다음과 같이 JS 핵심 코드는 다음과 같습니다

. (1)  // , 클릭 클릭 이벤트 
2 $ scope.roleNameSelection1 = 함수 (아이템) {
 3.      item.selectedValue =! Item.selectedValue]
 . (4)  }
 . 5  // roleNameSelected 상자 문자 배열은 다시 최종 선택된 값에 저장된 요청을 제출한다 
(6). $ scope.roleNameSelected = [];
 7. $ scope.roleSubmit = 함수 () {
 8.      CONSOLE.LOG ( "의 RoleList"+ JSON.stringify ($ scope.roleList))
 9.      // 모든 값 적합한 경우 선별, 즉 == 사실은 다음 roleNameSelected 배열로 밀어 item.selectedValue와 일치한다. 
10      $ scope.roleList.forEach ( 함수 (항목) {
 . 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은          " "역할 ID : $ scope.roleNameSelected
 21      }
 22      // 그렇지 않으면 오류 메시지가 의지, 선택해야합니다 
(23)     경우 ($ scope.roleNameSelected.length == 0 ) {
 24          $ scope.errorFlag1 = 참 ;
25          $ scope.selectionErrorMsg = "至少选择一个角色" ;
26      } 다른 {
 27          CONSOLE.LOG ( "formData"+ JSON.stringify (formData))
 28          $ http.post ( "XXXXX"formData, 기능 (데이터) {
 29              의 경우 (데이터) {
 30                  // 할일 
31              } 또 {
 32                  // 할일 
33              }
 34          });
(35)     }
 36 }

인터넷이 방법을 발견 한 뒤에, 또한 역할 점검을 재생할 수 있습니다, 단지 그것을 기록한다. HTML 페이지 확인 및 바인딩 ng-click="roleNameSelection($event,item.roleId)"이벤트와 NG-체크 = "에 isSelected ( item.roleId)" 이벤트

다음과 같이 JS 핵심 코드는 다음과 같습니다

1 $ scope.roleNameSelected = [];
2  VAR roleNameSelected = 함수 (액션 ID) {
 3      경우 (동작 == '추가'&& $ scope.roleNameSelected.indexOf (ID) == -1 ) $ scope.roleNameSelected.push (ID);
도 4      의 경우 (동작 == '삭제'&& $ scope.roleNameSelected.indexOf (ID) = -1!) $ scope.roleNameSelected.splice ($ scope.roleNameSelected.indexOf (ID), 1 );
5  };
6 $ scope.roleNameSelection = 함수 ($ 이벤트 ID) {
 7      VAR의 체크 박스 = $ event.target;
8      VAR의 조치는 = (checkbox.checked '추가'? '제거' );
9      roleNameSelected (액션 ID);
10  };
11 $ scope.isSelected = 함수 (ID) {
 12      반환 $ scope.roleNameSelected.indexOf (ID)> = 0 ;
13 };

코드보기

주요 아이디어는 아이디,이 역할의 작용에 의해 결정이 매개 변수를 전달하는 데, 클릭이 방법을 제공하여 이벤트를 결합하는 것입니다 add또는 removeroleNameSelected 배열을. 위에