AngularJS में दो फ़ील्ड कैसे योग करें और परिणाम को लेबल में दिखाएं?

मेरे पास मेरे पृष्ठ पर एक स्थिति है।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>

पहली बार है, जब पेज totaly भरी हुई है पर, लेबल योग दिखाएगी लेकिन जब मैं किसी भी इनपुट में कुछ मूल्य टाइप करें, इन SOUTION मुझे देता है की बजाय 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>

कोई sucessful फिर से:

तो मैं इन की कोशिश की।

लेबल में दिखाए गए दो इनपुट के योग परिणाम को मैं कैसे प्राप्त कर सकता हूं?

स्रोत

2012-10-06 Aitiow

क्या आपने वास्तव में अपने नियंत्रक में parseFloat विधि बनाई है? क्योंकि आप कोणीय अभिव्यक्तियों में जेएस का उपयोग नहीं कर सकते हैं, 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>

स्रोत

2012-10-06 01:28:51 ndm

धन्यवाद, यह निश्चित रूप से मेरी समस्या का समाधान करता है – Aitiow

आपका स्वागत है ... मैंने एक और तरीका जोड़ा है, मुझे नहीं पता कि मैं क्यों था पहले इसके बारे में सोचा नहीं, एक संदर्भ स्थापित करना भी ऐसा करना चाहिए। – ndm

बस ऐसा करने का मानक तरीका है 'मूल्य | 0', asm.js इसका उपयोग करते हुए, उदाहरण के लिए। – vittore

कोलंबस के अंडे है: डबल निषेध।

प्रारंभिक मान 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>

स्रोत

2013-11-22 14:57:59

क्या आप मुझे विभाजन और मल्टीपाई के लिए सुझाव दे सकते हैं। –

** प्रभाग ** और ** गुणा ** के लिए, आप बस '/' और '*' का उपयोग कर सकते हैं; ** राशि ** के साथ समस्या यह थी कि '+' को एक समेकन ऑपरेटर के रूप में व्याख्या किया गया था, न कि एक योग ऑपरेटर के रूप में ... '-' हैक करता है :) गुणा के लिए, आप दो ऑपरेटरों को 0 जोड़ सकते हैं शुरुआती शून्य मूल्य को रोकने के लिए, विभाजन के लिए आपको कुछ और सोचना है (0 से 0 के विभाजन के मामले में जब क्षेत्र 0 से भरा हुआ है): http://jsfiddle.net/AndreaLigios/73gQR/17/ –

ठंडा समाधान;) – Adrian

दो नंबर योग करने के लिए सबसे आसान और सबसे अच्छा तरीका है एचटीएमएल 5 के type="number" उपयोग कर रहा है। यदि आप ऐसा करते हैं, तो इनपुट के मान डिफ़ॉल्ट रूप से पूर्णांक होते हैं।

Updated fiddle

स्रोत

2014-07-18 00:06:51 user1429980

+ 1 पूछना चाहिए, यह सही है, कम से कम एचटीएमएल 5 ब्राउज़र –

Sum in Angularjs 
<div ng-app> 
     <input type="text" ng-model="first" /> 
     <input type="text" ng-model="second" /> 
     Sum: {{first*1 + second*1}} 
</div>

स्रोत

2015-01-16 09:51:52 Ankit

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

स्रोत

2016-01-06 10:02:09 sunny

बेहतर पठनीयता – AbdealiJK

कोड के लिए प्रत्येक फ़ाइल को अपने कोड टैग में रखें अकेले ब्लॉक एक अच्छा जवाब प्रदान नहीं करता है। कृपया स्पष्टीकरण जोड़ें (यह समस्या क्यों हल करें, गलती कहां थी, आदि ...) –

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

स्रोत

2017-05-30 12:53:15

आपको कुछ कोड पोस्ट नहीं करना चाहिए बल्कि अपने समाधान की व्याख्या करना चाहिए। – hering

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

स्रोत

2017-06-26 02:34:10

कोणीय (संस्करण 2 और ऊपर) के लिए नीचे दिए गए

<p>First Number <input type="number" [(ngModel)]="fnum"></p> 
    <p>Second Number <input type="number" [(ngModel)]="snum"></p> 
    <p>Total = {{fnum+snum}}</p>

स्रोत

2017-07-26 13:24:34 MKant

based on input tag type we can do it in these two ways

की तरह कुछ कर रही प्रयास करें

इनपुट टैग प्रकार के आधार पर हम इसे इन दो तरीकों से कर सकते हैं:

स्रोत

2018-01-26 15:23:26

AngularJS में दो फ़ील्ड कैसे योग करें और परिणाम को लेबल में दिखाएं?

उत्तर

संबंधित मुद्दे