如何增加和减少 angularjs 中的值？答案

【问题标题】：How can I increment and decrement a value in angularjs?如何增加和减少 angularjs 中的值？
【发布时间】：2015-01-29 09:47:16
【问题描述】：

我最初只有一个值 - 我们称之为 x。选择增量按钮应将“+1”增加到该值。如果我选择递减，x 应该减少 -1。

然而，实际发生的是，当我按下递增按钮时，它会增加 +1，但如果我点击递减，它会减少 -2。它只能增加/减少 1 个值。也不需要连续迭代（count++ 和 count--）。最好将“count”作为 .js 文件中的变量，而不是在 html 中将其作为 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>

【问题讨论】：

ng-click="count++" 或 ng-click="count--" :)
这种增量count++ 有效吗？我试过但没有成功:(只有count = count +1有效
用减号试试ng-click="count = count+1"，而不是ng-click="count = {{count}}+1"

标签： javascript angularjs

【解决方案1】：

这应该可行，

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

    <button ng-click="count = count - 1">
        Decrement
    </button>
<div>

【讨论】：

这里的迭代是什么意思？
我不需要 count++ 或 count-- 值。正好 1 个值要递增或递减。
@kriznaraj while decrement if 我想将条件设置为 - 因为递减计数应始终大于 1....如果小于 1，则递减不应该起作用 为此，我应该如何在按钮上添加条件
@ojuskulkarni 只需将减量按钮上的表达式更改为count = count > 1 ? count - 1 : count

【解决方案2】：

问题是因为你在ng-click中使用'{{'，它在那里插入值，所以在角度'渲染'之后，实际代码看起来像：

<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>

但您想使用参考。所以只需删除 '{{' 和 '}}' 就可以了。

【讨论】：

jsbin.com/savovexare/1 我不知道如何在 jsbin 中创建一个 fork，试试这个。
我不需要迭代。

【解决方案3】：

"正好 1 个值要递增或递减"

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

  <button ng-click="decrement();">
    Decrement
  </button>
<div>

控制器：

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;
  };
});

如果您希望用户能够重复执行此操作，那么...

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 小提琴 - http://jsfiddle.net/HB7LU/8673/

【讨论】：

如果你愿意，你可以结合这两种方法。即传递一个参数来指定是递增还是递减。
如果我首先选择增量。它显示 1，然后递减不起作用。
我以为这就是你想要的？只需使用两个保护变量即可。 2 秒..
此代码仅适用于 $scope.count = 0;这不适用于 $scope.count = 15;变量可以是任意数字。
您还需要更改最大值和最小值。

【解决方案4】：

这是一个示例工作代码，它满足以下条件： 1) 将计数器加一和减一 2）不使用连续迭代 3) 不使用 ng-init 4) 适用于 $scope.count = 15

（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>

【讨论】：