Контроллер не работает в Angular JS

Я новичок в Angular JS. Чтобы увидеть работу контроллера, я реализовал этот простой код, где два числа берут в качестве входных данных от пользователей, и их сумма вычисляется в контроллере, а результат отображается в виде. Но как-то не получается. Код выглядит следующим образом:

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

<body>
<div ng-app="CalculatorApp" ng-controller="CalculatorController">
<p> Number 1 <input type="number" ng-model="a"></p>
<p> Number 2 <input type="number" ng-model="b"></p>
<p> Addition is {{c}} </p>
</div>

angular.module('CalculatorApp', [])
.controller('CalculatorController', function($scope) 
{
$scope.c=$scope.a + $scope.b;
});

</body>
</html>

Пожалуйста, руководство.

Источник

2 ответа

Вам нужно добавить код JavaScript в script пометить с type='text/javascript', чтобы при разборе страницы желаемый JavaScript запускался.

А для получения рассчитанного результата в HTML вы должны следовать ответу @chet.

Код

<script type="text/javascript">
    angular.module('CalculatorApp', [])
    .controller('CalculatorController', function($scope) {
         $scope.c = $scope.a + $scope.b; //should follow @chet answer
    });
</script>
Источник

Во-первых, вы забыли обернуть свой JavaScript в <script></script> теги. Даже тогда у вас есть проблемы.

+ Изменить Addition is {{c}} в Addition is {{a + b}}и полностью сбросить расчет контроллера.

Код в функции определяет контроллер, он не выполняется каждый раз, когда что-то меняется.

Кроме того, вы можете определить функцию в $scope, а затем вызвать функцию.

$scope.calc = function() {
    return $scope.a + $scope.b;
};

Затем измените свой HTML на Addition is {{calc()}},

Источник
Другие вопросы по тегам