Question

使用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--;
        };

Thnx：）

Answer 1

你的加号＆amp;减号按钮应该只影响它们分配给的当前项目，而不是所有其他项目。为此，将项目实例传递给加号和减号函数 - 因为对象作为参考传递，对象数据将直接更改。

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

Answer 2

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

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

Answer 3

您的模型引用变量是错误的，即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--;
        };

角度加/减切换

3 个答案: