Created
May 31, 2015 04:15
-
-
Save csharpforevermore/cfc2b2b93eb1e9debcbd to your computer and use it in GitHub Desktop.
AngularJS checklist boxes - sourced from http://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<label ng-repeat="fruitName in fruits"> | |
<input | |
type="checkbox" | |
name="selectedFruits[]" | |
value="{{fruitName}}" | |
ng-checked="selection.indexOf(fruitName) > -1" | |
ng-click="toggleSelection(fruitName)" | |
> {{fruitName}} | |
</label> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) { | |
// fruits | |
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie']; | |
// selected fruits | |
$scope.selection = ['apple', 'pear']; | |
// 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); | |
} | |
}; | |
}]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Pros: simple data structure and toggling by name is easy to handle
Cons: add/remove is cumbersome as two lists (the input and selection) have to be managed