AngularJS, change model value with checkbox

Question

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 :)

Don't you have a Controller for this app? Can you show us your Javascript code - your controller? — ishmaelMakitla
– ishmaelMakitla, Commented Oct 3, 2016 at 22:31
I do have an empty controller, I was wondering if this was possible purely through directive computation, don't need the data to go anywhere — meow-meow-meow
– meow-meow-meow, Commented Oct 3, 2016 at 22:32

Lex · Accepted Answer · 2016-10-03 22:45:28Z

1

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>

edited Oct 3, 2016 at 22:45

answered Oct 3, 2016 at 22:40

Lex

7,2632 gold badges31 silver badges49 bronze badges

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

3 Comments

meow-meow-meow Over a year ago

Hi @Lex, yep I tried that. What it does is initialize the value to 150, then on checkbox click sets it 101 (true having a value of 1) and on toggle switches between 100 and 101.

meow-meow-meow Over a year ago

What I need is for the initial value to be 100 and on checkbox click, the value toggles to 150

Lex Over a year ago

I'm not sure why you want to do this in the HTML, but I have updated my answer to show one possible approach. As suggested by ishmaelMakitla, though, this type of logic really belongs in the controller.

Collectives™ on Stack Overflow

AngularJS, change model value with checkbox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related