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 $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)
    };
}

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

更新小提琴：jsfiddle.net/9exaarn2/4

Answer 1

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

<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)
};
}

请参阅js fiddlee update http://jsfiddle.net/9exaarn2/3/

Answer 2

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

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

控制器：

//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();
};

并选择将如下所示：

  <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 $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>

Answer 3

我会在复选框上使用ng-model并将其传递给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

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

3 个答案: