Как суммировать два поля в AngularJS и показывать результат на ярлыке?
У меня есть ситуация на моей странице.
У меня есть два входа и метка на моей странице. Эти метки должны отображать сумму этих двух значений ввода.
Итак, я попробовал решение ниже:
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 дают мне результат CONCATENATION 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>
снова нет.
Как я могу достичь суммарного результата двух входов, показанных на ярлыке?
Ответы
Ответ 1
Действительно ли вы создали метод parseFloat в вашем контроллере? Поскольку вы не можете просто использовать JS в выражениях Angular, см. Angular Выражения против выражений JS.
function controller($scope)
{
$scope.parseFloat = function(value)
{
return parseFloat(value);
}
}
edit: также можно просто установить ссылку на исходную функцию:
$scope.parseFloat = parseFloat;
Я также ожидал, что он будет работать с фильтрами, но, к сожалению, это не так (может быть ошибка, или я неправильно понял, как работают фильтры):
<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>
Обходным решением будет использование умножения для кастинга:
<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>
Ответ 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>
Ответ 3
Самый простой и лучший способ суммирования двух чисел - использование HTML5 type="number". Если вы это сделаете, значения входов по умолчанию будут целыми.
Обновлена скрипка
Ответ 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>
Ответ 5
<!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>
Ответ 6
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:..
Ответ 7
<!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
Для 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
![based on input tag type we can do it in these two ways]()
на основе типа входного тега мы можем сделать это двумя способами:
Ответ 10
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
Сумма двух чисел в AngularJs
<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}
