アンギュラ/ Vueのマルチチェックボックスの問題

　　このページに角度効果はVueのも、その一般的なプロセスに従って実装することができ、達成するために、コアの本質は変わっていません。
　　機能効果：ページの初期化効果はすべてのロールのチェックボックスをチェックすることによって認識される役割のデフォルトの初期化要件によってチェックされている、そして、国家の最終チェックに基づいて行われた要求を提出することができます。

　　効果を確認するには、まず：あなたは、図1の赤のボックスに示すように、ユーザは、一つだけ「経理マネージャー」が与えられている。この初期ページの役割を参照してください役割ページを割り当てる入力するために、「割り当てられた役割」ボタンをクリックすることができます。fetchAllProfileRoleとfetchUserRole、図に示すように、赤枠2：最初のページに、ページが2つの要求が開始されていることがわかります。そのすべての文字fetchAllProfileRole要求、役割がデフォルトの役割をチェックする必要性に与えられているfetchUserRole要求。ページの左側には、また、「会計管理」のチェックボックスの役割が確認されて見ることができます。

図1の最初のページの役割は、経理マネージャーであります

2割り当て役割のページリクエストはfetchAllProfileRoleとfetchUserRoleを開始しました

図3 fetchUserRole要求が確認され、デフォルトの役割が必要とされ、これは、会計管理者を指します。

　　今、私たちはテストを実施する必要があり、我々は役割で、「高度な検索」をチェックし、その後、図2に示すように、ユーザはすでに、これらの二つの役割を見つけたとき、それは最初のページに戻るには提出します。「役割の割り当て」ボタンをクリックして、再び、「会計管理」と「高度な検索」のチェックボックスがチェックされている二つの役割は、ボックスの左側には、図5に示すことを見出しました。その結果、我々は、所望の機能を実現します。

4ユーザーは、「経理マネージャー」と「高度な検索」2つの役割が与えられています

5「経理マネージャー」と「高度な検索」チェックボックスはデフォルトでチェックされています

　　RoleListは、すべてのロールにすべてのロールに保存され、ownRoleListデフォルトでチェックされて保存され、役割のすべてのRoleListすべての属性与える selectedValue 虚偽の割り当てを、各役割のためownRoleListがたRoleListで使用中のforEachメソッドと一致し、デフォルトでは、図1に示すように処理された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時に値がtrueの場合に初期化されます。すべてNGクリックイベントリスナーをクリックすると、 item.selectedValue=!item.selectedValue; その効果が打ち消さ。その後、一度チェックボックスをクリックし、初期設定を確認するためのボックスを想定 item.selectedValueが ある偽のページ表示がチェックされていない、つまり、NG-確認=「false」を、。

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 真の）{
 12である              （ "item.selectedValue：" +にconsole.log 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     もし（$ 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                  // のToDo 
31              } 他{
 32                  // ToDoの
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 }。

コードの表示

主なアイデアは、この役割の作用によって決定されたこのパラメータIDを渡すために、クリックこの方法を与えることで、イベントをバインドすることですaddかremoveroleNameSelected配列を。オーバー

アンギュラ/ Vueのマルチチェックボックスの問題

おすすめ