AngularJS 基于其他int变量的变量

Question

这里是非常新的开发人员。
尝试制作一个费用计算器，其中来自 table（每个都有特定的默认值）的输入整数之和成为另一个变量的 int 值。我觉得我错过了一些简单的东西，但我终生无法弄清楚是什么。

下面的javascript/angular

var app = angular.module('expenses', []);
app.controller('mainCtrlr', function($scope) {
    var expenseTotal<----variable I cannot get to work

    var expenseOne;
    var expenseTwo;
    var expenseThree;

    $scope.expenseOne = 270;
    $scope.expenseTwo = 265;
    $scope.expenseThree= 65;
});

填充此table的数据

<div ng-app="expenses" ng-controller="mainCtrlr">
<table>
    <tr>
    <td> Expense </td><td><input type= int ng-model="expenseOne"></td>
    </tr>
    <tr>
    <td>Other Expense </td><td><input type=int ng-model= "expenseTwo"></td>
    </tr>
    <tr>
    <td>Third Expense </td><td><input type=int ng-model= "expenseThree"></td>
    </tr>
    </table>
Total {{expenseTotal}}
</div>

我无法让 {{expenseTotal}} 显示除 NaN 之外的任何内容。我希望它是一个可用的变量，可以考虑到其他方程式，但要基于费用的总和。有谁知道我的 javascript 文件中还需要什么才能使这项工作正常进行？

在此先感谢，如果之前有人问过，但我在任何地方都找不到，我很抱歉。

Answer 1

{{expenseTotal}} 引用 $scope.expenseTotal，因此您可以在控制器中设置它：

app.controller('mainCtrl', function($scope) {
    $scope.expenseTotal = 4; // Do your calculations here
});

或者您可以在模板中引用控制器：

<div ng-controller="mainCtrl as ctrl">
    Total {{ctrl.expenseTotal}}
</div>

如果你想把三个变量加起来你可以这样写：

<div ng-controller="mainCtrl">
    ...
    Total {{expenseOne + expenseTwo + expenseThree}}
</div>

在这种情况下，不需要总变量。

Answer 2

angular.module('expenses', [])
    .controller('mainCtrlr', function($scope) {
        $scope.expenseOne = 270;
        $scope.expenseTwo = 265;
        $scope.expenseThree = 65;
        $scope.expenseTotal = $scope.expenseOne + $scope.expenseTwo + $scope.expenseThree;
    });

var 声明不会自动添加到作用域中，因此如果您希望它们在您的视图中可用，使用括号，您需要在控制器中将它们定义为 $scope 变量的属性。

AngularJS 基于其他int变量的变量

AngularJS variables based on other int variables

html

javascript

scope

data-modeling

angularjs