AngularJS 加/减切换答案

【问题标题】：AngularJS plus/minus toggleAngularJS 加/减切换
【发布时间】：2017-06-16 21:09:12
【问题描述】：

使用ng-repeat时，在数字输入字段上添加加号/减号切换的最佳方法是什么

我试过这样但它不起作用：

<div ng-repeat="item in PC.Items">
  <button ng-click="PC.minus()" class='btn btn-default'>-</button>
            <input ng-model="item.Quantity"
                    type='number'
                    name='Quantity'/>
            <button class='btn btn-default' ng-click="PC.plus()">+</button>
</div>

       vm.plus = function() {
            vm.Quantity++;
            console.log(vm.Quantity);
        };
        vm.minus = function() {
            vm.Quantity--;
        };

谢谢:)

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您的模型参考变量是错误的 PC 和项目

如果是 PC，那么更新的代码是

Your model reference variable is wrong that is PC and item

如果是 PC，那么更新的代码是

<div ng-repeat="item in PC.Items">
  <button ng-click="item.Quantity=item.Quantity+1" class='btn btn-default'>-</button>
            <input ng-model="item.Quantity"
                    type='number'
                    name='Quantity'/>
            <button class='btn btn-default' ng-click="item.Quantity=item.Quantity-1">+</button>
</div>

       vm.plus = function() {
            vm.Quantity++;
            console.log(vm.Quantity);
        };
        vm.minus = function() {
            vm.Quantity--;
        };

【讨论】：

【解决方案2】：

您的加号和减号按钮应该只影响它们分配给的当前项目，而不是所有其他项目。为此，请将项目实例传递给 plus 和 minus 函数 - 因为对象是作为引用传递的，所以将直接更改对象数据。

HTML：

<div ng-repeat="item in PC.Items">
    <button ng-click="PC.minus(item)" class="btn btn-default">-</button>
    <input ng-model="item.Quantity" type="number" name="Quantity"/>
    <button class="btn btn-default" ng-click="PC.plus(item)">+</button>
</div>

JS：

vm.plus = function(item) {
    item.Quantity++;
};
vm.minus = function(item) {
    item.Quantity--;
};

【讨论】：

【解决方案3】：

只需一行就可以满足您的要求，为什么要拥有更多功能会增加代码行数

HTML

 <button ng-click="countVal=countVal-1"><i class="glyphicon glyphicon-minus">  </i></button>
{{countVal}}
<button  ng-click="countVal=countVal+1"> <i class="glyphicon glyphicon-plus">  </i> </button>

JAVASCRIPT

$scope.countVal=0;

LIVEDEMO

【讨论】：