CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directivedirective
meow-meow-meow
meow-meow-meow

Reputation: 528

AngularJS, change model value with checkbox

I have a bound data variable named 'bool' which has a value of 100. When I click a checkbox I'd like the value to increase by adding 50 to it. What am I doing wrong?

<div ng-app="app">
  <h3 ng-model="bool = 100">BOOL</h3>
    <input type="checkbox" ng-model="add = 50"/>
    <div>{{bool + add}}</div>
</div>

Any help would be greatly appreciated,

Thank you :)

Upvotes: 0

Views: 504

Answers (1)

Lex
Lex

Reputation: 7194

ng-model cannot be an expression. If you need to assign a default value you should use ng-init.

Also, a checkbox has a value of either true (1) or false (0). So although {{bool + add}} will initially display 150, as soon as you check or uncheck the checkbox it will display either 100 or 101 because now add is either 0 or 1 depending on the checked state.

angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <div ng-app="app">
      <h3 ng-model="bool" ng-init="bool = 100; additional = 0">BOOL</h3>
        <input type="checkbox" ng-model="add" ng-change="additional = add * 50"/>
        <div>{{bool + additional}}</div>
    </div>

Upvotes: 1

Related Questions