angular view not updating when checkbox clicked

Question

View not updating when checkbox is checked. Should I used $scope.$apply? I need the Current state to change between YES and NO depending on whether the checkbox is checked or not. Here's the code on JSbin

<!DOCTYPE html>
<html ng-app="notesApp">
  <head>
    <title>Notes App</title></head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
   <body ng-controller="MainCtrl as ctrl">
     <div>
       <h2>What are your favorite sports?</h2>
       <div ng-repeat="sport in ctrl.sports">
         <br/>
         <label ng-bind="sport.label"></label>

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


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

       </div>
    </div>
  </body>
</html>

And here's the JS:

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'}
   ];

}]);

Wayne Ellery · Accepted Answer · 2015-01-02 02:24:30Z

10

You need to add quotations because it's an angularjs expression and it also needs to be a constant. If YES is used for an angular expression normally angular would look for a scope variable named YES, but that's not going to be a constant angular expression as the value of YES could change.

Instead you want to just set the value to 'Yes' as you want to assign the value as the constant string 'YES'. If you looked in the console you would have seen: Expected constant expression for 'ngTrueValue', but saw 'YES'.

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

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

edited Jan 2, 2015 at 2:24

answered Jan 2, 2015 at 1:11

Wayne Ellery

7,9581 gold badge30 silver badges45 bronze badges

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

4 Comments

raneshu Over a year ago

Thanks. Do you know why I need to add the extra single quotation marks?

arman1991 Over a year ago

Short explanation of @Wayne Ellery's correct answer:You are manipulating with string, not with scoped object, instead of single quotation marks on "YES", you have to use it twice "'YES'" to scope it correctly for bind recognization.

raneshu Over a year ago

Is it possible to add as $apply or $watch instead of the quotation twice? And how would that work?

Wayne Ellery Over a year ago

You could but what is the issue of using quotations for 'YES', 'NO'? This is saying to set the value of sport.selected to 'YES' or 'NO' and that is what you want. Why would you like to use $apply or $watch? That seems a very complicated way of solving the problem.

LCJ · Accepted Answer · 2016-06-24 21:24:56Z

0

Refer constexpr in the Error Reference documentation from angularjs. It says

Some attributes used in conjunction with ngModel (such as ngTrueValue or ngFalseValue) will only accept constant expressions.

answered Jun 24, 2016 at 21:24

LCJ

22.8k69 gold badges269 silver badges439 bronze badges

Collectives™ on Stack Overflow

angular view not updating when checkbox clicked

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related