在角JS添加數字

我學的角度JS和陷入了下面的代碼：在角JS添加數字

<div ng-app="calculate"> 
Amount: <input type='text' data-ng-model='amount' name = 'amount' placeholder = 'Enter amount' > 
Charge: <input type='text' name = 'charge' ng-bind="charge" value="{{ amount | serviceFilter }}" > 
Total: <input type='text' value= " {{(amount)+ (amount | serviceFilter)}}" name = 'total' > 
</div> 

<script> 
    angular.module('calculate', []) 
    .filter('serviceFilter', function(){ 
    return function(amount){ 
     if(angular.isUndefined(amount)){ 
     charge = '0'; 
     }else{ 
     if(isNaN(amount)){ 
      charge = 'Invalid Data !!!'; 
     }else{ 
      if(amount < 1000){ 
      charge = '200'; 
      }else{ 
      charge = '500'; 
      } 
     } 
     } 
     return charge; 
    }; 
    }); 
</script>

當我輸入金額。我收到適當的費用。但我無法加上金額並收取總金額。比方說：

Amount: 1200 
Charge: 500 
Total : 1700

我需要獲得1700，而是我得到

Total: 1200 500

此外，我想知道這是否是合適的方式或有任何其他更好的方式來做到這一點。 Thankyou

來源

2015-03-25 nasor

這些都被視爲字符串，將其轉換爲整數，然後進行添加操作。 – Arpit 2015-03-25 06:28:11

這裏有幾個方法可以做到這一點：

var app = angular.module('app', []); 
 

 
app.controller('myController', function($scope) { 
 
    $scope.strNum = '1'; 
 
    $scope.parseInt = parseInt 
 
}); 
 

 
app.filter('num', function() { 
 
    return function(input) { 
 
    return parseInt(input, 10); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="myController"> 
 
    {{ strNum }} 
 
    {{ 1*strNum + 1*strNum }} 
 
    {{ parseInt(strNum, 10) + parseInt(strNum, 10) }} 
 
    {{ (strNum|num) + (strNum|num) }} 
 
    </div> 
 
<div>

來源

2015-03-25 06:53:58 DTing

您可以在serviceFilter中使用parseInt（）或將字符串值乘以1來將其轉換爲整數。

第一種選擇：

<script> 
    angular.module('calculate', []) 
    .filter('serviceFilter', function(){ 
    return function(amount){ 
     var chargeInt; 
     if(angular.isUndefined(amount)){ 
     charge = '0'; 
     }else{ 
     if(isNaN(amount)){ 
      charge = 'Invalid Data !!!'; 
     }else{ 
      if(amount < 1000){ 
      charge = '200'; 
      }else{ 
      charge = '500'; 
      } 
     } 
     } 
     chargeInt = parseInt(charge); 
     if (isNaN(chargeInt)) 
      return charge; 
     else 
      return chargeInt; 
    }; 
    }); 
</script>

第二個選項：

<div ng-app="calculate"> 
Amount: <input type='text' data-ng-model='amount' name = 'amount' placeholder = 'Enter amount' > 
Charge: <input type='text' name = 'charge' ng-bind="charge" value="{{ amount | serviceFilter }}" > 
Total: <input type='text' value= " {{(amount)+ 1 * (amount | serviceFilter)}}" name = 'total' > 
</div>

來源

2015-03-25 06:32:41 lvarayut

這是因爲，當你在文字輸入綁定號碼，他們被視爲字符串，從而改變文本框中鍵入要號碼。

<input type='number' data-ng-model='amount' name='amount' placeholder='Enter amount'>

並改變在過濾器中的串型數字爲int

app.filter('serviceFilter', function(){ 
    return function(amount){  
     if(angular.isUndefined(amount)){ 
     charge = 0; 
     }else{ 
     if(isNaN(amount)){ 
      charge = 'Invalid Data !!!'; 
     }else{ 
      if(amount < 1000){ 
      charge = 200; 
      }else{ 
      charge = 500; 
      } 
     } 
     } 
     return charge; 
    }; 
});

或轉換爲intreturn parseInt(charge);像@LVarayut建議之後返回charge。

這裏是Demo Plunker

做一個簡單的黑客將這些字符串值，爲智力，

<input type='text' value="{{ (amount-0) + ((amount | serviceFilter)-0) }}" name='total'>

(amount-0)和((amount | serviceFilter)-0)將返回一個INT，刪除0將導致一個數字。

這裏是Demo Plunker

來源

2015-03-25 06:47:51

在角JS添加數字

回答

相關問題