基于其他 int 变量的 AngularJS 变量答案

【问题标题】：AngularJS variables based on other int variables基于其他 int 变量的 AngularJS 变量
【发布时间】：2015-09-29 00:08:19
【问题描述】：

这里是全新的开发者。
试图制作一个费用计算器，其中从表中输入的整数之和（每个整数都有一个特定的默认值）成为另一个变量的 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;
});

填充此表的数据

<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 文件中还需要什么才能使这项工作？

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

【问题讨论】：

你似乎没有对代码中的变量做任何事情？
我是，但在代码的其他部分......我只是隔离了问题所在以避免混乱

标签： javascript angularjs html scope data-modeling

【解决方案1】：

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 变量的属性。

【讨论】：

非常感谢。有没有一种简单的方法，在我更改输入内容时，从这个解决方案中分支出来以保持 {{expenseTotal}} 实时更新？如果我在 HTML 中包含 {{expenseOne}}，它会在我更改表单中的内容时实时更新。如果这不可能，您是否建议我使用计时器让它每隔几秒左右刷新一次？还是有更好的方法让它看起来“动态更新”
它将自动更新，只要用于定义变量的计算存在于角度摘要循环中。如果没有，则有 $scope.$apply() 方法，如果您说使用摘要循环之外的函数来设置该属性的值。这是一篇关于使用 $apply 的不错的文章：benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html
我必须承认，我花了最后一个小时试图理解并进行研究，但无法使其发挥作用。我似乎无法弄清楚使用什么方法来重置表达式。当我执行计数更改（使用'counter ++'）作为更新时，我可以让它工作，它是某种返回语句吗？我基本上只是想让它根据其他值刷新。
除非我要查看您的实际代码，否则我真的无能为力。我认为您计算更改或查找返回语句的方法不是正确的方法，范围变量在“角度领域”中更改时会在视图中自动更新。我认为您应该尝试通过阅读文档更好地理解角度范围：docs.angularjs.org/guide/scope 就像我说的，如果不查看代码库，很难解决您遇到的具体问题。

【解决方案2】：

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

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

【讨论】：