kathrynm kathrynm - 1 year ago 171
AngularJS Question

Angular, 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>

Any help would be greatly appreciated,

Thank you :)

Lex Lex
Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download