Добавление номера в угловых JS

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 

Кроме того, я хочу знать, если это является подходящим способом или есть любой другой лучший способ сделать это. Thankyou

Answer 1

Вот несколько способов сделать это:

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> 
 

Answer 2

Вы можете использовать parseInt() в своем serviceFilter или умножить значение строки на единицу, чтобы преобразовать его в целое.

Первый вариант:

<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

Это происходит потому, что при привязке номера в к тексту входов они рассматриваются как строки, так изменить тип текстового поля на номер.

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

или вернуть charge после преобразования в intreturn parseInt(charge); как @LVarayut предложил.

вот Demo Plunker

---

ИЛИ

сделать простой хак, чтобы преобразовать эти значения строки в целое, как,

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

(amount-0) и ((amount | serviceFilter)-0) возвращает Int, удаление 0 приведет к количеству.

вот Demo Plunker