반응형
Angular에서 두 필드를 합산하는 방법결과를 레이블로 표시합니까?
제 페이지에 문제가 생겼어요.
페이지에는 2개의 입력과 라벨이 있습니다.이들 라벨은 이들 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>
처음에 페이지가 로딩되면 라벨에 합계가 표시되지만 임의의 입력에 값을 입력하면 합계가 아닌 CONTATENATION 결과가 나타납니다.
그래서 이걸 해봤어요
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>
다시 성공하지 못했습니다.
라벨에 표시된 두 입력의 합계 결과를 얻으려면 어떻게 해야 합니까?
실제로 작성하셨습니까?parseFloat사용 중인 컨트롤러의 메서드각도 표현식에서는 JS를 간단히 사용할 수 없으므로 각도 표현식 대 JS Expressions.
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>
콜럼버스의 달걀은 이중 부정이다.
초기값은 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"이렇게 하면 입력값은 기본적으로 정수입니다.
Sum in Angularjs
<div ng-app>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
Sum: {{first*1 + second*1}}
</div>
<!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>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:..
'AngularJs의 두 숫자의 합'
<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}
<!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>
각도(버전 2 이상)의 경우다음과 같은 것을 시도해 보세요.
<p>First Number <input type="number" [(ngModel)]="fnum"></p>
<p>Second Number <input type="number" [(ngModel)]="snum"></p>
<p>Total = {{fnum+snum}}</p>
입력 태그 유형에 따라 다음 두 가지 방법으로 수행할 수 있습니다.
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 }}
단항 더하기 연산자를 사용하여 변수를 숫자로 캐스팅할 수 있습니다.
{{ (+count1)+(+count2) }}
언급URL : https://stackoverflow.com/questions/12755558/how-to-sum-two-fields-in-angularjs-and-show-the-result-in-an-label
반응형
'sourcecode' 카테고리의 다른 글
| WordPress 로그인 화면에서 reCAPTCHA v3 구현 (0) | 2023.02.22 |
|---|---|
| JSON.parse: 속성 이름 또는 '}'이(가) 필요합니다. (0) | 2023.02.22 |
| Oracle SQL Developer에서 특정 테이블을 참조하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
| 'descript' 이름을 찾을 수 없습니다.테스트 러너에 대한 유형 정의를 설치해야 합니까? (0) | 2023.02.22 |
| 현재 페이지가 워드프레스 카테고리 페이지인지 확인하시겠습니까? (0) | 2023.02.22 |