javascript - AngularJS の 2 つのフィールドを合計し、結果をラベルに表示する方法は?

Question

私のページに状況があります。

ページに 2 つの入力と 1 つのラベルがあります。これらのラベルは、これら 2 つの入力値の合計を表示する必要があります。

だから私は以下の解決策を試しました：

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

最初に、ページが完全に読み込まれると、ラベルに合計が表示されますが、入力に何らかの値を入力すると、これらのソリューションにより、 sum の代わりにandの CONCATENATION 結果が得られます Property.Field1Property.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>

再び成功しません。

ラベルに表示されている 2 つの入力の合計結果を得るにはどうすればよいですか?

score 56 · Accepted Answer

コントローラーで実際にparseFloatメソッドを作成しましたか? Angular 式で単純に JS を使用することはできないため、Angular 式と JS 式を参照してください。

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>

score 54 · Accepted Answer

コロンブスの卵は二重否定です。

初期値は (null ではなく) 0 になり、結果は (暗黙的な数値キャストのため、連結ではなく) 合計になります。

<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>

score 10 · Accepted Answer

2 つの数値を合計する最も簡単で最適な方法は、HTML5 のを使用することtype="number"です。これを行うと、入力の値はデフォルトで整数になります。

更新されたフィドル

score 1 · Accepted Answer

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:..

score 0 · Accepted Answer

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  }}

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

0

入力タグのタイプに基づいて、次の 2 つの方法で実行できます

入力タグのタイプに基づいて、次の 2 つの方法で実行できます。

于 2018-01-26T15:23:26.473 に答える

javascript - AngularJS の 2 つのフィールドを合計し、結果をラベルに表示する方法は?

12 に答える 12

Related

Reference