我的页面上有一个情况。
我的页面中有两个输入和一个标签。这些标签必须显示这两个输入值的总和。
所以我尝试了下面的解决方案:
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>
再没有成功。
如何实现标签中显示的两个输入的总和结果?
答案 0 :(得分:55)
您是否在控制器中实际创建了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>
答案 1 :(得分:53)
Columbus's egg 是: 双重否定 。
初始值将为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>
答案 2 :(得分:9)
将两个数字相加的最简单和最好的方法是使用HTML5的type="number"
。如果这样做,输入的值默认为整数。
答案 3 :(得分:7)
Sum in Angularjs
<div ng-app>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
Sum: {{first*1 + second*1}}
</div>
答案 4 :(得分:2)
<!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>
&#13;
答案 5 :(得分:1)
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:..
答案 6 :(得分:1)
'AngularJs中的两个数之和
<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}
答案 7 :(得分:0)
<!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>
答案 8 :(得分:0)
对于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>
答案 9 :(得分:0)
基于输入标签类型,我们可以通过以下两种方式实现:
答案 10 :(得分:0)
Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2 }}</label>
您可以使用双重否定而不是直接+。如果您使用type =“ number”,则此方法有效。对于type =“ text”,请使用双重否定方法。 像这样
sum:{{ Property.Field1 -- Property.Field2 }}
答案 11 :(得分:0)
您可以使用一元加号运算符将变量转换为数字。
{{ (+count1)+(+count2) }}