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=".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'}
];
}]);
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./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'}
];
}]);
2 Answers
Reset to default 10You 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
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.