Question

目前，我的复选框会从总费用中添加和减去费用。我怎样才能让我的选择做同样的事情？目前，当没有选择字段时，它的默认值为7700.00，为0.00。还注意到我的选择字段打破了我的复选框功能，因为在未选中时不会减去数字。

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

编辑：哎呀我的小提琴上有一个拼写错误。问题仍然相同......

Answer 1

很明显，您正在考虑使用jQuery思维模式。你需要练习思考角度方式。有关这是什么的一些想法，请参见this question and answer。

首先，你需要实际建模你的问题，描述什么是而不是如何完成任务。这看起来像是分裂头发。它不是。您应该使用ng-model来跟踪表单输入，而不是单击处理程序。

这里是您应该努力的控制器代码..请注意totalCost如何定义为覆盖成本的总和..而不是您在用户更改表单时手动操作的某些值：

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

这是模板（注意我删除了输入名称和点击处理程序......你不需要＆＃39; em）。

<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格式的数字。格式化通常由视图而不是控制器或模型处理。

查看the working fiddle。

如果您有兴趣，我们可以采取更进一步的措施，并进一步改进模型。您是否了解模板中的覆盖成本是如何重复的（一个用于显示，一个用于ng-value）？我们可以重写控制器并查看，以便应用程序模型（您的覆盖选项）仅在一个地方表示：

控制器：

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）或在某些时间表上有所不同。现在已经从视图中提取了信息，您可以更自由地更改它。

模板：

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

现在视图中没有重复数据......所有数据都来自控制器。这是一种很好的做法。

Updated fiddle

Answer 2

这是解决方案

<div ng-app>

添加此保险额$ 150 / YR
或者这个保险额为40美元/年

<select ng-selected="option()" ng-model="sel">
  <option disabled selected>Select one...</option>
  <option value="200">add $200/yr</option>
  <option 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;">{{annualCost}}</span>
<br>

和你的js，

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

$scope.option = function () {
    $scope.dollarAmmount = $scope.dollarAmmount + $scope.sel;
    $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)
};

}

Answer 3

您可以简单地绑定 $ scope 模型进行选择，然后观察其值。每次更改后都会获取新旧值的差异并将其添加到totalAmount ...

$scope.$watch('selectedValue', function(newValue, oldValue){
    $scope.dollarAmmount = $scope.dollarAmmount + (newValue - oldValue);
    console.log($scope.dollarAmmount)
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
})

这是您更新的JSFIDDLE ...

注意!!：您应该在您的示波器中初始化您的变量，否则首先是值，因为它将是未定义的，这会破坏您的算法......

$scope.selectedValue = 0;

选择选项时运行功能angularJS

3 个答案: