WirJun WirJun - 11 months ago 83
AngularJS Question

AngularJS Checkbox

I came across the AngularJS Material website and was playing around with some tutorials. The last example about checkboxes confused me a bit (this tutorial site)

<div flex="100" flex-gt-sm="50" layout="column">
<div >
<fieldset class="standard">
<legend>Using &lt;input type="checkbox"&gt;</legend>
<div layout="row" layout-wrap flex>
<div ng-repeat="item in items" class="standard" flex="50">
<label>
<input type="checkbox" ng-checked="exists(item, selected)"
ng-click="toggle(item, selected)"/>
{{ item }}
</label>
</div>
</div>
</fieldset>
</div>
</div>


I am wondering if it is possible to name checkboxes in html different, like (A,B,C,..) , but still work with the number (1,2,3,..) in the controller?

angular.module('checkboxDemo2', ['ngMaterial']).controller('AppCtrl', function($scope) {

$scope.items = [1,2,3,4,5];
$scope.selected = [];

$scope.toggle = function (item, list) {
var idx = list.indexOf(item);
if (idx > -1) {
list.splice(idx, 1);
}
else {
list.push(item);
}
};

$scope.exists = function (item, list) {
return list.indexOf(item) > -1;
};
});

Answer Source

Your array having only numbers, so ng-repeat showing that numbers

if you want A,B,C.., then your array should be like

$scope.items = [{name:'A',value:1},[{name:'B',value:2},[{name:'C',value:3},[{name:'D',value:4}];

and your html check box could be

<input type="checkbox" ng-checked="exists(item, selected)"
                   ng-click="toggle(item, selected)"/>
            {{ item.name }}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download