@evgemiil

Есть код счётчиков, как их сложить?

Хочу сложить несколько счётчиков, то есть указываешь числа двух счётчиков, и скрипт автоматически выводит их сумму, вроде принцип правильный, но что то неправильно пишу, выводит NAN, почему подскажите

сейчас так получилось, но он почему то складывает тогда когда находится на каком то блоке div
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
angular.module("CounterApp", []) 
  .controller("CounterController1", function($scope) { 
    $scope.a = 0; 
    $scope.decrement = function() { 
      if ($scope.a > 0) $scope.a--; 
    }
  })
  .controller("CounterController2", function($scope) { 
    $scope.b = 0; 
    $scope.decrement = function() { 
      if ($scope.b > 0) $scope.b--; 
    }
  })
  .controller("CounterController3", function($scope) { 
    $scope.c = 0; 
    $scope.decrement = function() { 
      if ($scope.c > 0) $scope.c--; 
    }
  });
</script>
</head>
<body>
<div ng-app="CounterApp"> 

<div ng-controller="CounterController1"> 
  <button ng-model="a" type="number" ng-click="decrement()">Decrement</button> 
  {{a}} 
  <button ng-model="a" type="number" ng-click="a = a + 1">Increment</button>
</div> 

<div ng-controller="CounterController2"> 
  <button ng-model="b" type="number" ng-click="decrement()">Decrement</button> 
  {{b}} 
  <button ng-model="b" type="number" ng-click="b = b + 1">Increment</button>
</div> 

<div ng-controller="CounterController3"> 
  <button ng-model="c" type="number" ng-click="decrement()">Decrement</button> 
  {{c}} 
  <button ng-model="c" type="number" ng-click="c = c + 1">Increment</button>
  <h1>{{ a + b + c }}</h1>
</div>    
</div> 
</div>
</body>
</html>
  • Вопрос задан
  • 180 просмотров
Решения вопроса 1
@Faliah
Набросал побыстрому решение

Позвольте отметить несколько моментов:
1) Вы создаете 3 контроллера с разными названиями, которые делают одно и то же. Видимо вы не понимаете, что каждый раз контроллер инстанциируется независимо от предыдущих. Вам не нужно объявлять отдельную функцию для каждого контроллера
2) Как уже сказали выше вы можете в данном случае обойтись вообще одним контроллером, либо сделать изолированные компоненты, что сложнее, но зато API будет очень чистый и понятный
3) Не понятно почему для декремента вы вынесли отдельную функцию, а для инкремента пользуетесь просто eval'ом. Код должен иметь одинаковую структуру и разделен на логические блоки.
4) Очень много дублирования кода

Прежде чем лезть в дебри, вам необходимо понять этот базовый пример, иначе дальше будет очень больно

P.S. Вариант решения, приведенный мной, - один из сотни, наверное.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@lotrop
Просто там где нужно пишешь {{counter1 + counter2}}
Ответ написан
1) Из какого контроллера вы пытаетесь получить тотал? Насколько я вижу там нет ни одного.
Для расшаривания данных между контроллерами существуют сервисы.
https://habrahabr.ru/post/190342/
Пройдите туториал с сайта ангуляра полностью и документацию почитайте. Вот еще неплохой курс
https://www.udemy.com/angularjs-jumpstart/

Вообще из вашего кода непонятно зачем вам именно три контроллера а не один. Зачем в следующей версии подключаете один контроллер три раза. Больше похоже на кашу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы