如何增加和減少angularjs中的值？

Question

我最初有一個值 - 讓我們稱之為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>

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

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

但你想參考。 所以只需刪除“{{”和“}}”即可。

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

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

如何增加和減少angularjs中的值？

問題描述

4 個解決方案

解決方案1
9 2014-12-01 11:52:24

解決方案2
3 2014-12-01 11:41:50

解決方案3
2 2014-12-01 12:31:34

解決方案4
0 2016-02-04 18:38:24

如何增加和減少angularjs中的值？

問題描述

4 個解決方案

解決方案1 9 2014-12-01 11:52:24

解決方案2 3 2014-12-01 11:41:50

解決方案3 2 2014-12-01 12:31:34

解決方案4 0 2016-02-04 18:38:24

解決方案1
9 2014-12-01 11:52:24

解決方案2
3 2014-12-01 11:41:50

解決方案3
2 2014-12-01 12:31:34

解決方案4
0 2016-02-04 18:38:24