Skip to content

Instantly share code, notes, and snippets.

@MISRV001

MISRV001/index.html

Created June 5, 2015 02:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MISRV001/9d2c9dfa40cf6f3c07bf to your computer and use it in GitHub Desktop.
Save MISRV001/9d2c9dfa40cf6f3c07bf to your computer and use it in GitHub Desktop.
Download ZIP
How can AngularJS bind to list of checkbox values? // source http://jsbin.com/vegaxotilu
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8>
<title>How can AngularJS bind to list of checkbox values?</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<div ng-controller="SimpleArrayCtrl">
<h3>With a simple array as input data</h3>
<dl>
<dt>Pros</dt>
<dd>simple data structure and toggling by name is easy to handle</dd>
<dt>Cons</dt>
<dd>add/remove is cumbersome as two lists (the input and selection) have to be managed</dd>
</dl>
<div class="row">
<div class="col-md-6">
<h4>selectables</h4>
<div class="form-group">
<label ng-repeat="plan in plans" class="checkbox-inline">
<input type="checkbox" name="selectedPlans[]" value="{{plan}}" ng-checked="selection.indexOf(plan) > -1" ng-click="toggleSelection(plan)"> {{plan.name}}
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>selection</h4>
<pre>{{selection|json}}</pre>
</div>
<div class="col-md-6">
<h4>input</h4>
<pre>{{plans|json}}</pre>
</div>
</div>
</div>
<hr>
</div>
<script id="jsbin-javascript">
(function (app) {
'use strict';
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// fruits
$scope.plans = {
"plan2511": {
"id": "plan2511",
"name": "Plan -1",
"price": 34.99
},
"plan2512": {
"id": "plan2512",
"name": "Plan -2",
"price": 34.99
},
"plan2513": {
"id": "plan2513",
"name": "Plan-3",
"price": 34.99
}
};
// selected fruits
$scope.selection = [{
"id": "plan2511",
"name": "Samsung Galaxy -1",
"price": 34.99,
"imagePath": "ABC"
}];
// toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(fruitName) {
var idx = $scope.selection.indexOf(fruitName);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
/**
* custom filter
*/
app.filter('fruitSelection', ['filterFilter', function (filterFilter) {
return function fruitSelection(input, prop) {
return filterFilter(input, { selected: true }).map(function (fruit) {
return fruit[prop];
});
};
}]);
})(angular.module('app', []));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8>
<title>How can AngularJS bind to list of checkbox values?</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"><\/script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<div ng-controller="SimpleArrayCtrl">
<h3>With a simple array as input data</h3>
<dl>
<dt>Pros</dt>
<dd>simple data structure and toggling by name is easy to handle</dd>
<dt>Cons</dt>
<dd>add/remove is cumbersome as two lists (the input and selection) have to be managed</dd>
</dl>
<div class="row">
<div class="col-md-6">
<h4>selectables</h4>
<div class="form-group">
<label ng-repeat="plan in plans" class="checkbox-inline">
<input type="checkbox" name="selectedPlans[]" value="{{plan}}" ng-checked="selection.indexOf(plan) > -1" ng-click="toggleSelection(plan)"> {{plan.name}}
</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>selection</h4>
<pre>{{selection|json}}</pre>
</div>
<div class="col-md-6">
<h4>input</h4>
<pre>{{plans|json}}</pre>
</div>
</div>
</div>
<hr>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">(function (app) {
'use strict';
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// fruits
$scope.plans = {
"plan2511": {
"id": "plan2511",
"name": "Plan -1",
"price": 34.99
},
"plan2512": {
"id": "plan2512",
"name": "Plan -2",
"price": 34.99
},
"plan2513": {
"id": "plan2513",
"name": "Plan-3",
"price": 34.99
}
};
// selected fruits
$scope.selection = [{
"id": "plan2511",
"name": "Samsung Galaxy -1",
"price": 34.99,
"imagePath": "ABC"
}];
// toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(fruitName) {
var idx = $scope.selection.indexOf(fruitName);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
/**
* custom filter
*/
app.filter('fruitSelection', ['filterFilter', function (filterFilter) {
return function fruitSelection(input, prop) {
return filterFilter(input, { selected: true }).map(function (fruit) {
return fruit[prop];
});
};
}]);
})(angular.module('app', []));</script></body>
</html>
Raw
jsbin.vegaxotilu.js
(function (app) {
'use strict';
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// fruits
$scope.plans = {
"plan2511": {
"id": "plan2511",
"name": "Plan -1",
"price": 34.99
},
"plan2512": {
"id": "plan2512",
"name": "Plan -2",
"price": 34.99
},
"plan2513": {
"id": "plan2513",
"name": "Plan-3",
"price": 34.99
}
};
// selected fruits
$scope.selection = [{
"id": "plan2511",
"name": "Samsung Galaxy -1",
"price": 34.99,
"imagePath": "ABC"
}];
// toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(fruitName) {
var idx = $scope.selection.indexOf(fruitName);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
/**
* custom filter
*/
app.filter('fruitSelection', ['filterFilter', function (filterFilter) {
return function fruitSelection(input, prop) {
return filterFilter(input, { selected: true }).map(function (fruit) {
return fruit[prop];
});
};
}]);
})(angular.module('app', []));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment