如何在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>

在第一时间,当页面加载完全以,标签显示的总和,但是当我在任何输入键入一些值, 这些soution给我的串联结果 Property.Field1和Property.Field2,而不是总和.

所以我尝试了这些:

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

你真的parseFloat在你的控制器中创建了一个方法吗？因为您不能简单地在Angular表达式中使用JS,请参阅Angular Expressions与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>

Answer 2

在哥伦布的鸡蛋是:双重否定.

初始值将为0(而不是null),结果将是一个总和(而不是串联,因为隐式数字转换).

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app>  
  <input ng-model="first"  placeholder="First number"  type="text" />
  <input ng-model="second" placeholder="Second number" type="text" />
  <h1> Sum: {{first--second}}! </h1>
</div>

Answer 3

将两个数字相加的最简单和最好的方法是使用HTML5 type="number".如果这样做,输入的值默认为整数.

更新了小提琴

Answer 4

Sum in Angularjs
<div ng-app>
        <input type="text" ng-model="first" />
        <input type="text" ng-model="second" />
        Sum: {{first*1 + second*1}}
</div>