如何在AngularJS中总结两个字段并将结果显示在标签中？
我的页面上有一个情况。
我在页面中有两个input和一个标签。 这些标签必须显示这两个input值的总和。
所以我试着下面的解决scheme
Sub-Total <input type="text" ng-model="Property.Field1" /> Tax <input type="text" ng-model="Property.Field2" /> Total <label>{{ Property.Field1 + Property.Field2 }}</label> 第一次，当页面被全部加载时，标签显示总和，但是当我在任何input中键入一些值时， 这些soution给我一个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>
再也没有成功。
我怎么能达到标签中显示的两个input的总和结果？
你真的在你的控制器中创build了一个parseFloat方法吗？ 因为不能在Angularexpression式中简单地使用JS，所以请参阅Angular Expressions与JSexpression式 。
function controller($scope) { $scope.parseFloat = function(value) { return parseFloat(value); } }
编辑：应该也可以简单地设置一个对原始函数的引用：
$scope.parseFloat = parseFloat;
我也希望它与filter，但不幸的是它不（可能是一个错误，或者我误解了filter如何工作）：
<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>
解决方法是使用乘法进行强制转换：
<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>
哥伦布的蛋是： 双重否定 。
初始值将是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>
总结两个数字的最简单和最好的方法是使用HTML5的type="number" 。 如果你这样做，input的值默认是整数。
更新小提琴
Sum in Angularjs <div ng-app> <input type="text" ng-model="first" /> <input type="text" ng-model="second" /> Sum: {{first*1 + second*1}} </div>
Simple method for this : Js file: var myApp = angular.module('myApp', []); myApp.controller("myCtrl", function ($scope) { $scope.sum = function (num1, num2) { $scope.addition = parseInt(num1) + parseInt(num2); } }); html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script> <head> <script src="script.js" type="text/javascript"></script> <title></title> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> Enter First Number:<input type="text" id="num1" ng-model="num1" /><br /> Enter Second Number:<input type="text" id="num2" ng-model="num2" /><br /> <input type="button" value="Sum" ng-click="sum(num1,num2)" /> <input type="text" ng-model="addition" /> </div> </body> </html> ///.. the textbox in which u want the output just use ng-model there .. as u can see above:..
<!DOCTYPE html> <html> <head> <title>Angular Addition</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <div ng-app=""> <p>First Number <input type="number" ng-model="fnum"></p> <p>Second Number <input type="number" ng-model="snum"></p> <p>Total {{ (snum) + (fnum) }}</p> </div> </body> </html>
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <h2>Demo-Sum of two input value </h2> <div ng-app="my_firstapp" ng-controller="myfirst_cntrl"> Number 1 : <input type="text" ng-model="Property.num1" data-ng-init="Property.num1='1'"><br> Number 2 : <input type="text" ng-model="Property.num2" data-ng-init="Property.num2='2'"><br> Sum of : {{ parseFloat(Property.num1) + parseFloat(Property.num2) }} </div> <script type="text/javascript"> var app1 = angular.module('my_firstapp', []); app1.controller('myfirst_cntrl', function controller($scope) { $scope.parseFloat = function(value) { return parseFloat(value); } }); </script> </body> </html> <p>Output</p> <p>Sum of : 3</p>
对于Angular（版本2和以上）尝试做下面的事情
<p>First Number <input type="number" [(ngModel)]="fnum"></p> <p>Second Number <input type="number" [(ngModel)]="snum"></p> <p>Total = {{fnum+snum}}</p>
