运行选择选项时的功能 angularJS

Question

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

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

            <select>
                <option disabled selected>Select one...</option>
                <option ng-selected="option(200)">add 0/yr</option>
                <option ng-selected="option(500)">add 0/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 中有错字。问题还是一样...

Answer 1

这是解决方案

<div ng-app>

添加此保险 $150/YR
和/或此保险 $40/YR

<select ng-selected="option()" ng-model="sel">
  <option disabled selected>Select one...</option>
  <option value="200">add 0/yr</option>
  <option value="500">add 0/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 2

您可以简单地将 $scope 模型绑定到 select 然后观察它的值.. 每次更改后，将新旧值的差异添加到 totalAmount...

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

这是您更新后的 JSFIDDLE...

注意！！：你应该在你的范围内初始化你的变量，否则第一个值 f 它将是未定义的，这会破坏你的算法...

$scope.selectedValue = 0;

Answer 3

很明显，您的思维方式是 jQuery。您需要练习以 angular 的方式思考。请参阅 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);
    };
}

这是模板（请注意，我删除了输入名称和点击处理程序...您不需要它们！）：

<input type="checkbox" ng-model="coverage[0]" ng-true-value="150" ng-false-value="0">
<label>Add this coverage 0/YR</label>
<br>
<input type="checkbox" ng-model="coverage[1]" ng-true-value="40" ng-false-value="0">
<label>and or this coverage /YR</label><br>
<select ng-model="coverage[2]">
    <option disabled selected>Select one...</option>
    <option ng-value="200">add 0/yr</option>
    <option ng-value="500">add 0/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

运行选择选项时的功能 angularJS

Run function when option is selected angularJS

angularjs

html-select

运行 选择选项时的功能 angularJS

Run function when option is selected angularJS

angularjs

html-select

运行选择选项时的功能 angularJS