ANGULAR 中的递增数字不起作用

Question

我在做一个应用程序，当你点击input时，有一个虚拟键盘会显示出来。减量应该是减量 ng-model food.Pezzi，它工作正常。但是增量不起作用：它添加了一个“1”。为什么？ PLUNKER CODE

（奇怪的是你先按Decrement再按Increment，increment有效....）

标记

<td>
    <a data-role="button" data-theme="e" ng-click="food.Pezzi = food.Pezzi-1; " 
      style="background-color: rgba(246, 246, 246, 0.2); border-color: rgba(0, 0, 0, 0.27); text-shadow: 0px 1px 0px #F3F3F3;color: #333;">
         Decrement
  </a>
</td>
<td>
    <a data-role="button" data-theme="b" class="zero" ng-click='food.Pezzi=food.Pezzi.toString()+"0"'>
        0
    </a>
</td>
<td>
    <a data-role="button" data-theme="e" class="pos" ng-click='food.Pezzi = food.Pezzi + 1' 
      style="background-color: rgba(246, 246, 246, 0.2); border-color: rgba(0, 0, 0, 0.27); text-shadow: 0px 1px 0px #F3F3F3;color: #333;">
        Increment
      </a>
</td>

谢谢指教

Answer 1

将代码更改为 var itemToClone = { "Selection": "", "Pezzi": 0 }; 而不是 var itemToClone = { "Selection": "", "Pezzi": "" };。您正在使用一个空字符串进行初始化，以将其附加到字符串而不是添加数字。

其他地方也一样。修改输入后，您必须使用 parseInt 键入字符串。

更新

真奇怪。让我们像这样在您的控制器中添加一个方法：

$scope.inc = function(food) {
    food.Pezzi = food.Pezzi || "0"
    food.Pezzi = parseInt(food.Pezzi.toString()) + 1;
};

现在，将增量按钮的 ng-click 修改为如下所示：ng-click="inc(food)"

Answer 2

首先，您使用 AngularJS 的方式很糟糕，永远不要将业务逻辑放入您的视图中。

顺便说一句，你的错误取决于属性 Pezzi 的 type，对于数学运算你需要使用数字，但是，在 javascript 中，+ 运算符甚至用于字符串连接...看看以下两个示例：（第一个是正确的，第二，因为丢失类型，另外执行字符串连接而不是求和）。

angular
  .module('test', [])
  .controller('TestCtrl', function($scope) {
    var vm = $scope;
  
    vm.food = { pezzi: 0 };
    
    vm.increment = function() { vm.food.pezzi += 1; };
    vm.decrement = function() { if(vm.food.pezzi > 0) vm.food.pezzi -= 1;   };
    vm.reset = function() { vm.food.pezzi = 0; };

    vm.getType = function() {
      return typeof vm.food.pezzi;
    }
    
      
    vm.foodCloned = { pezzi: 0 + '' };
    
    vm.incrementCloned = function() { vm.foodCloned.pezzi += 1 + ''; };
    vm.decrementCloned = function() { vm.foodCloned.pezzi -= 1 + ''; };
    vm.resetCloned = function() { vm.foodCloned.pezzi = 0 + ''; };

    vm.getClonedType = function() {
      return typeof vm.foodCloned.pezzi;
    }
    
  })
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="test">
  <div ng-controller="TestCtrl">
    
    <button ng-click="decrement($event)">Decrement</button>
    <button ng-click="increment($event)">Increment</button>
    <button ng-click="reset($event)">Reset</button>
    
    
    <h1 ng-bind="food | json"></h1>
    <div ng-bind="getType()"></div>
    <hr><hr>
    
    
    <button ng-click="decrementCloned($event)">Decrement</button>
    <button ng-click="incrementCloned($event)">Increment</button>
    <button ng-click="resetCloned($event)">Reset</button>
    
    
    <h1 ng-bind="foodCloned | json"></h1>
    <div ng-bind="getClonedType()"></div>
  </div>
</article>

ANGULAR 中的递增数字不起作用

Increment number in ANGULAR doesn't work

javascript

angularjs

html

increment

angularjs-ng-click