SURYA VISWANATHAN SURYA VISWANATHAN - 2 months ago 10
AngularJS Question

Display checkbox values from controller

I want to display certain checkbox values. The values should be called from the controller. Since, I need to save the values, it would be better for me to declare the values in the controller and then use it in the html. With my code, I'm unable to get the values from the controller. My code,



{{ngapp}}.controller(
"SAdController",
function($scope){

$scope.items = [{
name: 'Printability',
value: true
}, {
name: 'Defectivity',
value: true
}, {
name: 'Process Window',
value: true
}, {
name: 'Parametric Shift',
value: true
}, {
name: 'Yield Impact',
value: true
}, {
name: 'Reliability',
value: true
}, {
name: 'Other',
value: true
}];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- HTML -->

<div class="form-group">
<td><label>Main Concern</label></td>
</br>
<tr><input type="checkbox" ng-model="arform.mainconcern" ng-repeat="item in items"

<td>{{item.name}}</td>
</tr>
</div>





I did look for similar titles, unfortunately I din't get a proper solution. Anyone can help? Thanks.

Answer

IMO, you should use ng-repeat with parent element when you've multiple check-box elements.

<li ng-repeat="item in items">
     <input type="checkbox" ng-model="item.value" />{{item.name}}
</li>

Additionally, you can use ng-checked, ng-true-value, ng-false-value as per your need.

Reference of input[checkbox]

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.items = [{
                        name: 'Printability',
                        value: true
                        }, {
                         name: 'Defectivity',
                         value: true
                          }, {
                            name: 'Process Window',
                            value: true
                          }, {
                            name: 'Parametric Shift',
                            value: true
                          }, {
                            name: 'Yield Impact',
                            value: true
                          }, {
                            name: 'Reliability',
                            value: true
                          }, {
                            name: 'Other',
                            value: true
                          }];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="GreetingController">
<li ng-repeat="item in items">
              <input type="checkbox" ng-model="item.value" />{{item.name}}
</li>
</body>