CODEWITHSUNDEEP
angularjscheckbox
Parzi
Parzi

Reputation: 704

Add a number if checkbox is checked subtract if its unchecked

Currently I have a checkbox that will trigger my function every time it is clicked. How can I make it add the number if its checked and subtract the number when its unchecked?

I have found several related issues but can't quite find what I am looking for. JSFIDDLE: http://jsfiddle.net/9exaarn2/

HTML:

<div ng-app>
    <div ng-controller="showCrtl">            
             <input type="checkbox" name="additionalCoverage" ng-click="cost(150)"> <label>Add this coverage $150/YR</label><br>
             <input type="checkbox" name="additionalCoverage" ng-click="cost(40)"> <label>and or this coverage $40/YR</label>

        <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
        <span style="color: green; font-size: 45px; line-height: 2;">{{annualCost}}</span><br>
                 </div>
</div>

JS:

function showCrtl($scope){
    $scope.dollarAmmount = 0.00;
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00";

    $scope.cost = function(amt) {
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
        $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
        console.log($scope.dollarAmmount)
    };
}

Edit: Original question answered but I am also looking for how to make a select list trigger my function.

Updated Fiddle: jsfiddle.net/9exaarn2/4

Upvotes: 0

Views: 1595

Answers (3)

PSL
PSL

Reputation: 123739

Update based on question update and comment:

I'd suggest you to convert select to use ng-options and also you can make use of built-in currency filter for formatting:

Controller:

//Set your options
$scope.options = [{
    text: 'add $200/yr',
    value: 200
}, {
    text: 'add $500/yr',
    value: 500
}];

//Just a simple method to calculate the total cost
$scope.calculateTotal = function () {
    $scope.annualCost = $scope.dollarAmmount + ($scope.options.selected || 0);
}

//My previous answer.
$scope.cost = function (amt, checked) {
    $scope.dollarAmmount += (amt * (checked ? 1 : -1));
    $scope.calculateTotal();
};

and select will look like this:

  <select ng-model="options.selected"
          ng-options="option.value as option.text for option in options" 
          ng-change="calculateTotal()">
        <option value="">Select one...</option>
    </select>

Fiddle

You could use event and look for checked value, if you don't want to add ng-model for each of those check boxes.

  <input type="checkbox" name="additionalCoverage"  ng-click="cost(150, $event.target.checked)">

and

 $scope.cost = function(amt, checked) {
    amt *= checked ? 1 : -1; //change amt based on checked prop
    $scope.dollarAmmount = $scope.dollarAmmount + amt;


function showCrtl($scope){
    $scope.dollarAmmount = 0.00;
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00";

    $scope.cost = function(amt, checked) {
        amt *= checked ? 1 : -1;
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
        $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
        console.log($scope.dollarAmmount)
    };
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="showCrtl">            
             <input type="checkbox" name="additionalCoverage"  ng-click="cost(150, $event.target.checked)"> <label>Add this coverage $150/YR</label><br>
             <input type="checkbox" name="additionalCoverage" ng-click="cost(40, $event.target.checked)"> <label>and or this coverage $40/YR</label>

        <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
        <span style="color: green; font-size: 45px; line-height: 2;">{{annualCost}}</span><br>
                 </div>
</div>

Upvotes: 1

UsainBloot
UsainBloot

Reputation: 816

I would use an ng-model on the checkbox and pass that into function stated in ng-click.

HTML

<input type="checkbox" ng-model="checkbox150" name="additionalCoverage" ng-click="cost(150, checkbox150)"> <label>Add this coverage $150/YR</label><br>
<input type="checkbox" ng-model="checkbox40" name="additionalCoverage" ng-click="cost(40, checkbox40)"> <label>and or this coverage $40/YR</label>

JS

$scope.cost = function(amt, checked) {
    if(checked) {
      $scope.dollarAmmount = $scope.dollarAmmount + amt;
    } else {
      $scope.dollarAmmount = $scope.dollarAmmount - amt;
    }
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
    console.log($scope.dollarAmmount)
};

http://plnkr.co/edit/ANt0W2MoaU0HfVALOwqA?p=preview

Upvotes: 0

user3227295
user3227295

Reputation: 2156

add parameter $event to cost function like this

<div ng-app>
<div ng-controller="showCrtl">            
         <input type="checkbox" name="additionalCoverage" ng-click="cost(150,$event)"> <label>Add this coverage $150/YR</label><br>
         <input type="checkbox" name="additionalCoverage" ng-click="cost(40,$event)"> <label>and or this coverage $40/YR</label>

    <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
    <span style="color: green; font-size: 45px; line-height: 2;">{{annualCost}}</span><br>
             </div>

js

function showCrtl($scope){
$scope.dollarAmmount = 0.00;
$scope.annualCost = "$" + $scope.dollarAmmount + ".00";

$scope.cost = function(amt,e) { 
    if(e.target.checked)
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
    else
        $scope.dollarAmmount = $scope.dollarAmmount - amt;
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
    console.log($scope.dollarAmmount)
};
}

see js fiddlee update http://jsfiddle.net/9exaarn2/3/

Upvotes: 2

Related Questions