Javascript 如何在 angularjs 中增加和减少一个值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27227535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I increment and decrement a value in angularjs?
提问by madhu kumar
I have one value initially - let's call it x. Selecting the increment button should increase "+1" to the value. If I select decrement, x should decrease by -1.
我最初有一个值——我们称之为 x。选择增量按钮应将“+1”增加到该值。如果我选择递减，x 应该减少 -1。
However, what actually happens is that when I press the increment button, it increases +1 but if i click decrement, it decreases -2. It should only be increased/decreased by 1 value only. Also don't require continuous iteration (count++ and count--). it would be better if "count" is taken as variable inside .js file, not mentioning it in html as ng-init="count=15" .
但是，实际发生的情况是，当我按下增量按钮时，它会增加 +1，但是如果我单击“减量”，它会减少 -2。它只能增加/减少 1 个值。也不需要连续迭代（计数++和计数--）。如果将“count”作为 .js 文件中的变量，而不是在 html 中将其作为 ng-init="count=15" 提及，那就更好了。
<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>
回答by kriznaraj
Simply this 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>
回答by Steven Keith
"Exactly 1 value to be incremented or decremented"
“正好要增加或减少 1 个值”
<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 repeatedly do this, 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/
JS 小提琴 - http://jsfiddle.net/HB7LU/8673/
回答by Rasalom
The problem is because you using '{{' in ng-click, it's inserting value there, so after angular 'rendering', actual code looks like:
问题是因为你在 ng-click 中使用了 '{{'，它在那里插入了值，所以在 angular 'rendering' 之后，实际代码看起来像：
<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 reference. So just remove '{{' and '}}' and it will work.
但你想参考工作。所以只需删除 '{{' 和 '}}' 就可以了。
回答by JavaTec
Here is a sample working code and caters to 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
这是一个示例工作代码，满足以下要求：1) 将计数器增加和减少 1 2) 不使用连续迭代 3) 不使用 ng-init 4) 适用于 $scope.count = 15
(The replies already provided by Rasalom and smallatom helped and so did the link: http://www.w3schools.com/angular/angular_events.asp)
（Rasalom 和 smallatom 已经提供的回复帮助了链接：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>
