vendredi 24 juillet 2015

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 .




Aucun commentaire:

Enregistrer un commentaire