Angular, ändern Modellwert mit Kontrollkästchen

Question

Ich habe eine gebundene Datenvariable mit dem Namen 'bool', die einen Wert von 100 hat. Wenn ich ein Kontrollkästchen anklicke, möchte ich den Wert erhöhen, indem Sie 50 hinzufügen. Was mache ich falsch?

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

Jede Hilfe wäre sehr dankbar,

Danke :)

Answer 1

ng-model nicht ein Ausdruck sein kann. Wenn Sie einen Standardwert zuweisen müssen, sollten Sie ng-init verwenden.

Auch ein Kontrollkästchen hat einen Wert von entweder wahr (1) oder falsch (0). Also, obwohl {{bool + add}} wird zunächst 150 angezeigt, sobald Sie das Kontrollkästchen aktivieren oder deaktivieren, wird entweder 100 oder 101 angezeigt, da jetzt add entweder 0 oder 1 ist abhängig von dem Status überprüft.

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>