angularjs - 选择选项时运行函数angularJS

目前让我的复选框从我的总成本中添加和减去它们的成本。我怎样才能让我的选择做同样的事情？当前，当没有选择字段时，它的默认值是 7700.00，它是 0.00。还注意到我的选择字段在取消选中时不减去数字，从而破坏了我的复选框功能。

更新 fiddle :http://jsfiddle.net/9exaarn2/6/

HTML:

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

            <select>
                <option disabled selected>Select one...</option>
                <option ng-selected="option(200)">add $200/yr</option>
                <option ng-selected="option(500)">add $500/yr</option>
            </select>
         <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.option = function (amt) {
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
        $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
        console.log($scope.dollarAmmount)
    };

    $scope.cost = function (amt, checked) {
        amt *= checked ? 1 : -1;
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
        $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
        console.log($scope.dollarAmmount)
    };
}

编辑:哎呀在我的 fiddle 中有一个错字。问题还是一样...

最佳答案

很明显，您正在以 jQuery 思维方式进行思考。你需要练习以 Angular 的方式思考。请参阅 this question and answer 了解它是什么。

首先，您需要对问题进行实际建模，描述事情是什么，而不是描述事情是如何完成的。这可能看起来像 split 头发。它不是。您应该使用 ng-model 来跟踪表单输入，而不是单击处理程序。

这是您应该争取的 Controller 代码..注意 totalCost 如何定义为覆盖成本的总和..而不是您在用户更改表单时手动操作的某些值:

function showCrtl($scope) {
    $scope.coverage = [];
    $scope.totalCost = function (){
        return $scope.coverage.reduce(function(sum, cost){
            return sum + parseInt(cost);
        },0);
    };
}

这是模板(请注意，我删除了输入名称和单击处理程序……您不需要它们!):

<input type="checkbox" ng-model="coverage[0]" ng-true-value="150" ng-false-value="0">
<label>Add this coverage $150/YR</label>
<br>
<input type="checkbox" ng-model="coverage[1]" ng-true-value="40" ng-false-value="0">
<label>and or this coverage $40/YR</label><br>
<select ng-model="coverage[2]">
    <option disabled selected>Select one...</option>
    <option ng-value="200">add $200/yr</option>
    <option ng-value="500">add $500/yr</option>
</select>
<h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
<span style="color: green; font-size: 45px; line-height: 2;">
{{totalCost() | currency}}
</span>

还要注意 currency 的使用。这称为过滤器。它用于格式化 $0.00 格式的数字。格式化是通常由 View 而不是 Controller 或模型处理的责任。

查看 the working fiddle 。

如果您感兴趣，我们可以进一步改进模型。您是否看到模板中的覆盖成本是如何复制的(一个用于显示，一个用于 ng-value )？我们可以重写 Controller 和 View ，使应用程序模型(您的覆盖选项)仅在一处表示:

Controller :

function showCrtl($scope) {
    $scope.coverageCosts = [];
    $scope.totalCost = function (){
        return $scope.coverageCosts.reduce(function(sum, cost){
            return sum + parseInt(cost);
        },0);
    };
    $scope.primaryCoverageOptions = [150,40];
    $scope.specialCoverageOptions = [200, 500];
}

将来，您的 coverageOptions 可能会通过 AJAX ( $http.get ) 来自您的后端或随某些计划而变化。现在已经从您的 View 中提取了信息，您可以更自由地更改它。

模板:

<div ng-app>
    <div ng-controller="showCrtl">
        <div ng-repeat="option in primaryCoverageOptions">
            <label>
            <input type="checkbox" ng-model="coverageCosts[$index]" ng-true-value="{{option}}" ng-false-value="0"/>
            Add this coverage {{option | currency}}/YR
            </label>
        </div>
        <select ng-model="coverageCosts[2]">
            <option disabled selected>Select one...</option>
            <option ng-repeat="option in specialCoverageOptions" ng-value="option">
                {{option | currency}}
            </option>
        </select>
        <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
        <span style="color: green; font-size: 45px; line-height: 2;">
        {{totalCost() | currency}}
        </span>
        <div>
            Selected coverage costs: {{coverageCosts}}
        </div>
        <br>
    </div>
</div>

现在 View 中没有重复的数据......所有数据都来自 Controller 。这是一个很好的做法。

Updated fiddle

关于angularjs - 选择选项时运行函数angularJS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30336803/