Как parseInt в Angular.js

Возможно, это самая простая вещь, но я не смог разобрать строку в Int в angular..

То, что я пытаюсь сделать:

<input type="text" ng-model="num1">
<input type="text" ng-model="num2">

Total: {{num1 + num2}}

Как я могу суммировать эти значения num1 и num2?

Thnx!

Ответ 1

Вы не можете (по крайней мере в данный момент) использовать parseInt внутри выражений angular, так как они не оцениваются напрямую. Цитирование документа:

Angular не использует JavaScript eval() для оценки выражений. Вместо этого службы angular $parse обрабатывают эти выражения.

Angular выражения не имеют доступа к глобальным переменным типа window, document или location. Это ограничение является преднамеренным. Это предотвращает случайный доступ к глобальному государству - общий источник тонкие ошибки.

Итак, вы можете определить метод total() в вашем контроллере, а затем использовать его в выражении:

// ... somewhere in controller
$scope.total = function() { 
  return parseInt($scope.num1) + parseInt($scope.num2) 
}

// ... in HTML
Total: {{ total() }}

Тем не менее, это кажется довольно громоздким для такой простой операции, как добавление чисел. Альтернативой является преобразование результатов с помощью -0 op:

Total: {{num1-0 + (num2-0)|number}}

... но это, очевидно, не будет иметь значения parseInt, а только отбрасывает их в Numbers (фильтр |number предотвращает показ null, если этот результат приводит к NaN). Поэтому выберите подход, который подходит вашему конкретному случаю.

Ответ 2

Вариант 1 (через контроллер):

angular.controller('numCtrl', function($scope, $window) {
   $scope.num = parseInt(num , 10);
}

Вариант 2 (через специальный фильтр):

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

{{(num1 | num) + (num2 | num)}}

Вариант 3 (через выражение):

Объявите это первым в своем контроллере:

$scope.parseInt = parseInt;

Тогда:

{{parseInt(num1)+parseInt(num2)}}

Вариант 4 (из raina77ow)

{{(num1-0) + (num2-0)}}

Ответ 3

<input type="number" string-to-number ng-model="num1">
<input type="number" string-to-number ng-model="num2">

Total: {{num1 + num2}}

и в js:

parseInt($scope.num1) + parseInt($scope.num2)

Ответ 4

Выполните операцию внутри самой области.

<script>
angular.controller('MyCtrl', function($scope, $window) {
$scope.num1= 0;
$scope.num2= 1;


  $scope.total = $scope.num1 + $scope.num2;

 });
</script>
<input type="text" ng-model="num1">
<input type="text" ng-model="num2">

Total: {{total}}

Ответ 5

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

app.controller('MainCtrl', ['$scope', function($scope){
   $scope.num1 = 1;
   $scope.num2 = 1;
   $scope.total = parseInt($scope.num1 + $scope.num2);

}]);

Демо: parseInt с AngularJS

Ответ 6

Это к способу привязки добавить тоже номера

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>

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

app.controller("myCtrl", function($scope) {
$scope.total = function() { 
  return parseInt($scope.num1) + parseInt($scope.num2) 
}
})
</script>
<body ng-app='myApp' ng-controller='myCtrl'>

<input type="number" ng-model="num1">
<input type="number" ng-model="num2">
Total:{{num1+num2}}

Total: {{total() }}


</body>
</html>

Ответ 7

Внутри шаблона это работает отлично.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
<input ng-model="name" value="0">
<p>My first expression: {{ (name-0) + 5 }}</p>
</div>

</body>
</html>