CODEWITHSUNDEEP
javascriptjqueryangularjscheckbox
Arjun Sarthi
Arjun Sarthi

Reputation: 109

Checkboxes binding in AngualrJS

I have two checkboxes , one with Data Binding and other one is without Data Binding.As you can see in the code below.

<html ng-app="notesApp">
    <head><title>Notes App</title></head>
    <body ng-controller="MainCtrl as ctrl">
        <div>
            <h2>What are your favorite sports?</h2>
            <div ng-repeat="sport in ctrl.sports">
                <label ng-bind="sport.label"></label>
                <div>
                    With Binding:
                    <input type="checkbox"  data-ng-true-value="YES" data-ng-false-value="NO" >
                </div>
                <div>
                    Using ng-checked:
                    <input type="checkbox" data-ng-checked='sport.selected === "YES"'>

                </div>
                <div>
                    Current state : {{sport.selected}}
                </div>

            </div>

        </div>

        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript">
        angular.module('notesApp',[])
            .controller('MainCtrl',[function(){
                var self = this;
                self.sports = [
                    {label:'Basketball',selected: 'YES'},
                    {label:'Cricket',selected:'NO'},
                    {label:'Soccer',selected:'NO'},
                    {label:'Swimming',selected:'YES'}
                ];

            }]);

        </script>
    </body>
</html>

When i click on the checkbox of 'with data binding', it should bind and reflect the value in current state label.But it is not happening.Why ?.Can someone help Please .

Upvotes: 1

Views: 705

Answers (3)

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

2 problems I found with your code:

  1. You forgot ng-model
  2. You should specify a constant for ng-true-value and ng-false-value, by specifying YES angular will look for a YES property on the scope, write 'YES' instead

Updated working plnkr:

http://plnkr.co/edit/rnYRUpIICC7HAKdKXf3i?p=preview

<html ng-app="notesApp">

<head>
    <title>Notes App</title>
</head>

<body ng-controller="MainCtrl as ctrl">
<div>
    <h2>What are your favorite sports?</h2>
    <div ng-repeat="sport in ctrl.sports">
        <label ng-bind="sport.label"></label>
        <div>
            With Binding:
            <input type="checkbox" ng-model="sport.selected" data-ng-true-value="'YES'" data-ng-false-value="'NO'" />
        </div>
        <div>
            Using ng-checked:
            <input type="checkbox" data-ng-checked="sport.selected === 'YES'" />
        </div>
        <div>
            Current state : {{sport.selected}}
        </div>
    </div>
</div>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script type="text/javascript">
    angular.module('notesApp',[])
            .controller('MainCtrl',[function(){
                var self = this;
                self.sports = [
                    {label:'Basketball',selected: 'YES'},
                    {label:'Cricket',selected:'NO'},
                    {label:'Soccer',selected:'NO'},
                    {label:'Swimming',selected:'YES'}
                ];

            }]);

</script>
</body>

</html>

EDIT: As @g00glen00b mentioned, before angular 1.3 ng-true-value accepted only constant values, so in case you're not using angular 1.3 or later you don't have to wrap YES in quotes.

Upvotes: 1

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44675

The data-ng-true-value and data-ng-false-value are used when you're using the input[checkbox] directive, but they do require ngModel, as you can see in the docs (note that ng-model is not in square brackets).

Without providing the model, AngularJS has no way to know where to apply the true/false value to. Adding data-ng-model does seem to work, as you can see in the following fiddle.

<input type="checkbox" ng-model="sport.selected"
    data-ng-true-value="YES"
    data-ng-false-value="NO" />

Also, please note that when using AngularJS 1.3 or higher, the values of ng-true-value and ng-false-value should be an expression rather than a constant value. Which means that for AngularJS 1.3 and higher you'll have to replace it by ng-true-value="'YES'", for example:

<input type="checkbox" ng-model="sport.selected"
    data-ng-true-value="'YES'"
    data-ng-false-value="'NO'" />

Upvotes: 1

Amit Chhangani
Amit Chhangani

Reputation: 28

You are not applying "data-ng-model" attribute to the the checkbox. Please replace your "With binding" check box code from below:

<input type="checkbox" data-ng-model="sport.selected" data-ng-true-value="YES" data-ng-false-value="NO" >

Upvotes: 0

Related Questions