Расчет суммы с использованием углового

Question

Я начинаю на AngularJs, и мне сложно показать сумму двух чисел. Первая работа сценарий отлично:

<div> 
    <p><input type="text" ng-model="price1" /> <strong>{{price1}}</strong></p> 
    <p><input type="text" ng-model="price2" /> <strong>{{price2}}</strong></p> 
    <p><strong>{{total = (price1 * 1 + price2 * 1) }}</strong></p> 
</div> 

Но когда я пытаюсь проверить это с помощью контроллера, например:

<div ng-controller="myCtrl"> 
    <p><input type="text" ng-model="price1" /> <strong>{{price1}}</strong></p> 
    <p><input type="text" ng-model="price2" /> <strong>{{price2}}</strong></p> 
    <p><strong>{{total}}</strong></p> 
</div> 
<script> 
    var app = angular.module('firstApp', []); 
    app.controller('myCtrl', ['$scope', function($scope) { 
     $scope.total = ($scope.price1 + $scope.price2); 
    }]); 
</script> 

я не имею никакого результата, только значение NaN. Я понятия не имею, что случилось!

Answer 1

Есть несколько вопросов, в ваш код:

1. Переменные $scope.price1 и $scope.price2 не определены после инициализации контроллера. Арифметическая операция с использованием undefined В результате получается NaN.
2. Вы вычисляете $scope.total раз один раз. Его результат не обновляются на изменении $scope.price1 или $scope.price2
3. В входах следует использовать type="number" не type="text" то значение $scope.price1 и $scope.price2 будет обрабатываться и суммируется в виде чисел. В вашем коде они объединены как строки.

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

 
app.controller("myCtrl", function ($scope) { 
 
    $scope.price1 = 1; 
 
    $scope.price2 = 2; 
 
    
 
    $scope.getTotal = function() { 
 
    return $scope.price1 + $scope.price2; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
    <p><input type="number" ng-model="price1" /> <strong>{{price1}}</strong></p> 
 
    <p><input type="number" ng-model="price2" /> <strong>{{price2}}</strong></p> 
 
    <p><strong>{{getTotal()}}</strong></p> 
 
</div> 
 
</div>

Answer 2

Нужно установить значения по умолчанию? Это говорит NaN, потому что вы ничего не ввели в поля ввода?

Попробуйте инициализировать переменные в контроллере выше общего расчета.

$scope.price1 = 0; 
$scope.price2 = 0; 

Answer 3

Значения не определены при вызове сумму, просто дать им начальное значение

$scope.price1 = 1; 
$scope.price2 = 2; 
$scope.total = ($scope.price1 + $scope.price2); 

То, что вы делаете, это приравнивает к:

$scope.total = ($scope.price1 + $scope.price2); 
$scope.total = (undefined + undefined); //equals to NaN 

Answer 4

я это делаю, но я должен дать значение в мой контроллер для price1 и price2, как это:

<script> 
    var app = angular.module('firstApp', []); 
    app.controller('myCtrl', ['$scope', function($scope) { 
     $scope.price1 = 1; 
     $scope.price2 = 2; 
     $scope.total = ($scope.price1 + $scope.price2); 
    }]); 
</script> 

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