001.<!DOCTYPE html>
002.<html ng-app="app">
003.<head>
004. <meta charset=utf-8>
005. <!--
006. Created using JS Bin
007. http:
008.
009. Copyright (c) 2021 by anonymous (http:
010.
011. Released under the MIT license: http:
012. -->
013. <meta name="robots" content="noindex">
014. <title>How can AngularJS bind to list of checkbox values?</title>
015. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
016. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
017.</head>
018.
019.<body>
020. <div class="container">
021. <div class="page-header">
023. </div>
024. <div ng-controller="SimpleArrayCtrl">
025. <h3>With a simple array as input data</h3>
026. <dl>
027. <dt>Pros</dt>
028. <dd>simple data structure and toggling by name is easy to handle</dd>
029.
030. <dt>Cons</dt>
031. <dd>add/remove is cumbersome as two lists (the input and selection) have to be managed</dd>
032. </dl>
033. <div class="row">
034. <div class="col-md-6">
035. <h4>selectables</h4>
036. <div class="form-group">
037. <label ng-repeat="fruitName in fruits" class="checkbox-inline">
038. <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)"> {{fruitName}}
039. </label>
040. </div>
041. </div>
042.
043. <div class="col-md-6">
044. <p><strong>Toggling</strong> by name is easy in this case, because the needed helper method can be reused.</p>
045. <button class="btn btn-default" ng-click="toggleSelection('naartjie')">Toggle <em>naartjie</em></button>
046. </div>
047. </div>
048. <div class="row">
049. <div class="col-md-6">
050. <h4>selection</h4>
051. <pre>{{selection|json}}</pre>
052. </div>
053.
054. <div class="col-md-6">
055. <h4>input</h4>
056. <pre>{{fruits|json}}</pre>
057. </div>
058. </div>
059. </div>
060. <hr>
061. <div ng-controller="ObjectArrayCtrl">
062. <h3>With an object array as input data</h3>
063. <dl>
064. <dt>Pros</dt>
065. <dd>add/remove is very easy</dd>
066.
067. <dt>Cons</dt>
068. <dd>somewhat more complex data structure and toggling by name is cumbersome or requires a helper method</dd>
069. </dl>
070. <div class="row">
071. <div class="col-md-6">
072. <h4>selectables</h4>
073. <div class="form-group">
074. <label ng-repeat="fruit in fruits" class="checkbox-inline">
075. <!--
076. - use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
077. traditionally
078.
079. - use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
080. (no two-way-data-binding)
081.
082. - use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
083. is arbitrary. The property name could be anything and will be created on the object if not present.
084. -->
085. <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-model="fruit.selected"> {{fruit.name}}
086. </label>
087. </div>
088. </div>
089. <div class="col-md-6">
090. <p><strong>Toggling</strong> by name is not so easy in this case, because the the code is either rather ugly, or a helper method is needed.</p>
091. <button class="btn btn-default" ng-click="(fruits|filter:{name:'naartjie'})[0].selected = !(fruits|filter:{name:'naartjie'})[0].selected">Toggle <em>naartjie</em></button>
092. </div>
093. </div>
094. <div class="row">
095. <div class="col-md-6">
096. <h4>selection as simple array using $watch</h4>
097. <pre>{{selection|json}}</pre>
098.
099. <h4>selection as simple array using a custom filter</h4>
100. <pre>{{fruits|fruitSelection:'name'|json}}</pre>
101.
102. <h4>selection using the default filter</h4>
103. <pre>{{fruits|filter:{selected:true}|json}}</pre>
104.
105. <h4>selection using a helper function</h4>
106. <pre>{{selectedFruits()|json}}</pre>
107. </div>
108. <div class="col-md-6">
109. <h4>input</h4>
110. <pre>{{fruits|json}}</pre>
111. </div>
112. </div>
113. </div>
114. </div>
115. <script>
116. (function (app) {
117. 'use strict';
118. app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
119.
120. $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
121.
122. $scope.selection = ['apple', 'pear'];
123.
124. $scope.toggleSelection = function toggleSelection(fruitName) {
125. var idx = $scope.selection.indexOf(fruitName);
126.
127. if (idx > -1) {
128. $scope.selection.splice(idx, 1);
129. }
130.
131. else {
132. $scope.selection.push(fruitName);
133. }
134. };
135. }]);
136. app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
137.
138. $scope.fruits = [
139. { name: 'apple', selected: true },
140. { name: 'orange', selected: false },
141. { name: 'pear', selected: true },
142. { name: 'naartjie', selected: false }
143. ];
144.
145. $scope.selection = [];
146.
147. $scope.selectedFruits = function selectedFruits() {
148. return filterFilter($scope.fruits, { selected: true });
149. };
150.
151. $scope.$watch('fruits|filter:{selected:true}', function (nv) {
152. $scope.selection = nv.map(function (fruit) {
153. return fruit.name;
154. });
155. }, true);
156. }]);
157.
158.
159.
160. app.filter('fruitSelection', ['filterFilter', function (filterFilter) {
161. return function fruitSelection(input, prop) {
162. return filterFilter(input, { selected: true }).map(function (fruit) {
163. return fruit[prop];
164. });
165. };
166. }]);
167. })(angular.module('app', []));
168. </script>
169.</body>
170.</html>
