There is a counter code, how to add them?

E

evgemiil2016-09-15 15:40:58

Angular

evgemiil, 2016-09-15 15:40:58

I want to add up several counters, that is, you specify the numbers of two counters, and the script automatically displays their sum, like the principle is correct, but I write something wrong, displays NAN, tell me why
it happened now, but for some reason it adds up when it is on some block 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>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

F

Faliah, 2016-09-16
@evgemiil

Sketched out a quick solution
Let me make a few points:
1) You create 3 controllers with different names that do the same thing. Apparently you do not understand that each time the controller is instantiated regardless of the previous ones. You do not need to declare a separate function for each controller
2) As mentioned above, in this case you can get by with one controller at all, or make isolated components, which is more difficult, but the API will be very clean and understandable
3) It is not clear why you took out the decrement a separate function, and for the increment you just use eval. The code must have the same structure and be divided into logical blocks.
4) A lot of code duplication
Before you get into the jungle, you need to understand this basic example, otherwise it will be very painful
. PS The solution I gave is one of a hundred, probably.

L

lotrop, 2016-09-15
@lotrop

Just where you need to write {{counter1 + counter2}}

V

Vladimir, 2016-09-15
@Casufi

1) From which controller are you trying to get the total? As far as I can see there isn't one.
There are services for sharing data between controllers.
https://habrahabr.ru/post/190342/
Complete the tutorial from the Angular website and read the documentation. Here is another good course
https://www.udemy.com/angularjs-jumpstart/
In general, it is not clear from your code why you need three controllers and not one. Why in the next version connect one controller three times. More like porridge.