AngularJS Checkbox群から選択したものを取得

AngularJSで、Checkbox群の中から選択したものだけを保持するオブジェクトを提供する。

使い方

モジュール「"checklist-model"」を読み込む

js

var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl1', function($scope) {

//Checkbox表示用リストの作成
  $scope.roles = [
    'guest', 
    'user', 
    'customer', 
    'admin'
  ];
  
  //状態保存用オブジェクト作成
  $scope.user = {
    roles: ['user']
  };
 
});

html

<label ng-repeat="role in roles">
  <input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>



選択項目の確認用リスト表示
<div class="col-lg-2">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="item in user.roles">{{item.Text}}</li>
    </ul>
</div>

拡張

Jsonをそのまま格納も可能
その際にはchecklist-value → data-checklist-valueに変更する

<label ng-repeat="role in roles">
  <input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>