Display checkbox values from controller

Question

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.

May I know what this code snippet means {{ngapp}}.controller( — balajivaishnav
– balajivaishnav, Commented Oct 4, 2016 at 8:48
Are getting data from the server or is it really a hard coded data? — Ravi Teja
– Ravi Teja, Commented Oct 4, 2016 at 9:04

Mohit Tanwani · Accepted Answer · 2016-10-04 08:50:15Z

1

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>

answered Oct 4, 2016 at 8:50

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SURYA VISWANATHAN Over a year ago

Yeah. It works fine. All the checkboxes are selected by default. Any attributes to keep all of them not selected initially?

Mohit Tanwani Over a year ago

You can make the value to false in your controller for respected checkbox, and you can also use condition on ng-checked

SURYA VISWANATHAN Over a year ago

Hi. Another help. Is there any way to get the selected checkbox values in to a variable. I need the selected values to be saved in to the db.

illeb · Accepted Answer · 2016-10-04 08:49:30Z

1

Your ng-model it's incorrect: change your ng-model="arform.mainconcern" to ng-model="item.value" and you should be good to go.

answered Oct 4, 2016 at 8:49

illeb

2,9471 gold badge23 silver badges35 bronze badges

1 Comment

SURYA VISWANATHAN Over a year ago

I tried ng-model="item.value". It din't work even then. The main Problem is I'm not even able to see the Checkbox fields in the User Interface. I'm just seeing the checkbox but not with the name specified in the controller.

balajivaishnav · Accepted Answer · 2016-10-06 05:55:07Z

1

Here is the plunkr

HTML

<!DOCTYPE html >
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myControl">
 <table>
             <tr>
              <td><label>Main Concern</label></td> 
             </tr>
             <tr ng-repeat="item in items">
              <td><input type="checkbox" ng-model="item.value"/>
              </td>
              <td>
                {{item.name}}
              </td>
             </tr>
             </table>


 <button type="button" ng-click="getValues()">Get Values</button>
              {{checkedValues}}
  </body>

</html>

script.js

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

app.controller("myControl",['$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
                          }];
  $scope.getValues=function(){
    $scope.checkedValues=[]
    angular.forEach($scope.items,function(item){

      if(item.value){
        $scope.checkedValues.push(item.name);

      }

    })

  }

}])

edited Oct 6, 2016 at 5:55

answered Oct 4, 2016 at 9:00

balajivaishnav

2,8935 gold badges25 silver badges39 bronze badges

2 Comments

SURYA VISWANATHAN Over a year ago

Worked. Thanks. Not sure why ng-app is put in that way. I'm just modifying old code of an application.

SURYA VISWANATHAN Over a year ago

Hi. Another help. Is there any way to get the selected checkbox values in to a variable. I need the selected values to be saved in to the db

Nishant123 · Accepted Answer · 2016-10-04 08:55:38Z

0

Try this

<div class="form-group">
             <table>
             <tr>
              <td><label>Main Concern</label></td> 
             </tr>
             <tr ng-repeat="item in items">
              <td><input type="checkbox" ng-model="item.value"/>
              </td>
              <td>
                {{item.name}}
              </td>
             </tr>
             </table>
                   </div>

FULL EXAMPLE

answered Oct 4, 2016 at 8:55

Nishant123

1,9662 gold badges28 silver badges46 bronze badges

Collectives™ on Stack Overflow

Display checkbox values from controller

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related