javascript - 如何在 AngularJS 中对两个字段求和并在标签中显示结果？

Question

我的页面上有一个情况。

我的页面中有两个输入和一个标签。这些标签必须显示这两个输入值的总和。

所以我尝试了以下解决方案:

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

第一次，当页面完全加载时，标签显示总和，但是当我在任何输入中键入一些值时，这些解决方案为我提供了 Property.Field1 和 Property.Field2 的 CONCATENATION 结果，而不是总和。

所以我尝试了这些:

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ parseFloat(Property.Field1) + parseFloat(Property.Field2)  }}</label>

没有再次成功。

如何获得标签中显示的两个输入的总和结果？

Answer 1

你真的在你的 Controller 中创建了一个 parseFloat 方法吗？因为不能简单地在 Angular 表达式中使用 JS，请参阅 Angular Expressions vs. JS Expressions .

function controller($scope)
{
    $scope.parseFloat = function(value)
    {
        return parseFloat(value);
    }
}

编辑:也应该可以简单地设置对原始函数的引用:

$scope.parseFloat = parseFloat;

我也希望它能与过滤器一起使用，但不幸的是它不能(可能是一个错误，或者我误解了过滤器的工作原理):

<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>

解决方法是使用乘法进行转换:

<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>