Как суммировать два поля в 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

на основе типа входного тега мы можем сделать это двумя способами:

Ответ 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}}