如果选中复选框，则添加一个数字；如果未选中，则减去

Question

目前我有一个复选框，每次单击它都会触发我的功能。如何让它在选中时加上数字，在未选中时减去数字？

我发现了几个相关问题，但无法完全找到我要找的东西。 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 0/YR</label><br>
             <input type="checkbox" name="additionalCoverage" ng-click="cost(40)"> <label>and or this coverage /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)
    };
}

编辑：原始问题已回答，但我也在寻找如何使 select 列表触发我的功能。

已更新 Fiddle：jsfiddle。net/9exaarn2/4

Answer 1

将参数 $event 添加到成本函数像这样

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

查看 js fiddlee 更新 http://jsfiddle.net/9exaarn2/3/

Answer 2

我会在复选框上使用 ng-model 并将其传递到 ng-click 中声明的函数中。

HTML

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

Answer 3

根据问题更新和评论更新：

我建议您将 select 转换为使用 ng-options，您也可以使用内置的货币过滤器进行格式化：

控制器：

//Set your options
$scope.options = [{
    text: 'add 0/yr',
    value: 200
}, {
    text: 'add 0/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();
};

和 select 将如下所示：

  <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

如果您不想为每个复选框添加 ng-model，您可以使用事件并查找选中的值。

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

和

 $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 0/YR</label><br>
             <input type="checkbox" name="additionalCoverage" ng-click="cost(40, $event.target.checked)"> <label>and or this coverage /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>

如果选中复选框，则添加一个数字；如果未选中，则减去

Add a number if checkbox is checked subtract if its unchecked

checkbox

angularjs