Checkbox
Checkbox
HTML
<div ng-app="TestAngularApp">
<div ng-controller="ExampleController">
<label ng-repeat="hobbie in Hobbies">
<input type="checkbox"
name="selectedHobbies[]"
value="{{hobbie}}"
ng-checked="selection.indexOf(hobbie) > -1"
ng-click="toggleSelection(hobbie)"> {{hobbie}}
</label>
<br />
<a data-ng-click="SetSelected();">Set Selected</a>
<br/>
<a data-ng-click="GetSelected();">Get Selected</a>
<br/>
<div id="divSelected">
<p ng-repeat="el in elements">{{el}}</p>
</div>
</div>
</div>
JavaScript
angular.module('TestAngularApp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.Hobbies = [];
$scope.Hobbies.push('Cricket');
$scope.Hobbies.push('Reading');
$scope.Hobbies.push('Writing');
$scope.Hobbies.push('Sleeping');
$scope.Hobbies.push('Running');
$scope.Hobbies.push('Football');
$scope.Hobbies.push('Programming');
//track check and uncheck
$scope.setSelectedClick = false;
$scope.selection = [];
// toggle selection for a given hobbie by name
$scope.toggleSelection = function toggleSelection(hobbie) {
var idx = $scope.selection.indexOf(hobbie);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(hobbie);
}
};
$scope.SetSelected = function () {
// Selected Hobbies
if ($scope.setSelectedClick) {
$scope.selection = [];
$scope.setSelectedClick = false;
} else {
$scope.selection = ['Running', 'Sleeping'];
$scope.setSelectedClick = true;
}
};
$scope.elements = [];
$scope.GetSelected = function () {
$scope.elements = [];
$scope.elements.push('selected arry....');
angular.forEach($scope.selection, function(value, key) {
this.push(key + ': ' + value);
}, $scope.elements);
};
}]);