All geek questions in one place

How can I increase and decrease value in angularjs?

I have one value initially - let it x. Selecting the increment button should increment the value "+1" to the value. If I choose the decrement, x should decrease by -1.

However, what actually happens is that when I press the increment button, it increases by +1, but if I press the decrement, it decreases by -2. It should be increased / decreased by only 1 value. Also, continuous iteration is not required (count ++ and count--). it would be better if "count" is taken as a variable inside the .js file without mentioning it in html as ng-init = "count = 15".

Jsbin

<div ng-controller="CounterController"> <button ng-click="count = {{count}}+1" ng-init="count=15"> Increment </button> count: {{count}} <button ng-click="count = {{(count) - 1}}"> Decrement </button> <div>
+6
source share
4 answers

It just should work

 <div> <button ng-click="count = count+1" ng-init="count=15"> Increment </button> count: {{count}} <button ng-click="count = count - 1"> Decrement </button> <div>
+6
source

The problem is that you use '{{' in ng-click, it inserts the value there, so after angular 'rendering', the actual code looks like this:

 <div ng-controller="CounterController"> <button ng-click="count = 15+1" ng-init="count=15"> Increment </button> count: {{count}} <button ng-click="count = 15 - 1"> Decrement </button> <div>

but you want to work with the link. So just delete '{{' and '}}' and it will work.

+2
source

"Exactly 1 value to be increased or decreased"

 <div ng-controller="CounterController"> <button ng-click="increment();"> Increment </button> count: {{count}} <button ng-click="decrement();"> Decrement </button> <div>

Controller:

 angular.module('myApp', []) .controller('CounterController', function($scope) { var incremented = false; var decremented = false; $scope.count = 15; $scope.increment = function() { if (incremented) { return; } $scope.count++; incremented = true; }; $scope.decrement = function() { if (decremented) { return; } $scope.count--; decremented = true; }; });

If you want the user to be able to do this many times, then ...

 angular.module('myApp', []) .controller('CounterController', function($scope) { $scope.count = 15; var max = $scope.count + 1; var min = $scope.count - 1; $scope.increment = function() { if ($scope.count >= max) { return; } $scope.count++; }; $scope.decrement = function() { if ($scope.count <= min) { return; } $scope.count--; }; });

JS Fiddle - http://jsfiddle.net/HB7LU/8673/

+1
source

Here is an example of working code and serves the following: 1) increases and decreases the counter by one 2) does not use continuous iteration 3) does not use ng-init 4) works for $ scope.count = 15

(The answers provided by Rasalom and smallatom helped, as well as the link: http://www.w3schools.com/angular/angular_events.asp )

 <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count+1"> Increment </button> count: {{ count }} <button ng-click="count = count-1"> Decrement </button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 15; }); </script> </body> </html>
0
source

Source: https://habr.com/ru/post/978938/

More articles:


All Articles