Question

我正在学习角度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

此外，我想知道这是否是适当的方式，或者还有其他更好的方法来做到这一点。谢谢你

Answer 1

这是因为当您将数字绑定到文本输入时，它们将被视为字符串，因此将文本框类型更改为数字。

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

并将filter中的字符串类型数更改为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;
   };
});

转换为charge int之后

或返回return parseInt(charge);，例如@LVarayut建议。

这是Demo Plunker

或

做一个简单的hack将这些字符串值转换为int as，

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

(amount-0)和((amount | serviceFilter)-0)将返回一个int，删除0会产生一个数字。

这是Demo Plunker

Answer 2

您可以在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>

Answer 3

以下是一些方法：

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>

在Angular js中添加数字

3 个答案: