CODEWITHSUNDEEP
htmlangularjs
Sjmon
Sjmon

Reputation: 553

Angularjs - Handle checkbox value

Im trying to set a checkbox to be "true" at soon as the page load (and it works fine) but as soon the page load the value is "empty". If i click the checkbox it starts saying "true and false".

What im doing wrong here? http://jsfiddle.net/WTN4p/13/

<div ng-app>
<div >
    <input type="checkbox" ng-checked="true" ng-true-value="true" ng-false-value="false" ng-model="check"/>        
</div>


check is: {{ check }}

<div ng-show="check == 'true'">
    Checked
</div>

Best Reguards Simon

Upvotes: 1

Views: 1001

Answers (2)

Tony Barnes
Tony Barnes

Reputation: 2643

You need to define the initial value/state of check.

You could do this inside a controller: 

$scope.check = 'true';

With your existing setup you can use ng-init in the view:

<div ng-init="check = 'true'">
    <input type="checkbox" ng-checked="true" ng-true-value="true" ng-false-value="false" ng-model="check"/>      
</div>

http://jsfiddle.net/ff23a4at/1/

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

When you define property using ng-model,Angular will start looking for the properties value in $scope. If the property is not present then it will be undefined.

In your case, as you aren't initialising the variable check before it's value is `undefined'.

Angular interpolation service is smart enough that it won't show undefined while evaluating the expression.

That's why you don't see any output in {{check}}.

One option to tackle this:

Set initial value of check in your controller.

$scope.check = 'true';

Else in your view:

ng-init="check = 'true'";

Upvotes: 1

Related Questions