如何在 Angular js 1.x 中对表的多行进行数量增减操作，并通过 ng-repeat 重复行
我有一个 jQuery 代码，但我不知道如何在 Angular js 中实现它。第一个代码是我如何在 jQuery 中实现它，下一个代码片段是我如何在 Angular js 中实现它，但我无法增加和减少数量。
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<script>
$(".addqt").click(function() {
var $row = $(this).closest("tr");// Find the row
var $quantity= $row.find(".qun").val();
var new_quantity=parseInt($quantity)+1;
$row.find(".qun").val(new_quantity);
});
$(".subqt").click(function() {
var $row = $(this).closest("tr");// Find the row
var $quantity= $row.find(".qun").val();
var new_quantity=parseInt($quantity)-1;
$row.find(".qun").val(new_quantity);// Find the text box near subtract buuton and assign new value
});
</script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table border="box">
<tr>
<th>Part No</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>ZB80900259</td>
<td>619.74</td>
<td>
<button id="neen" class='btn btn-success addqt'>+</button>
<input readonly type='text' class='qun text-center' value='0' style='width:30px;height:34px;'>
<button id="geen" class='btn btn-danger subqt'>-</button>
</td>
</tr>
<tr>
<td>Z80098330</td>
<td>230.00</td>
<td>
<button id="neen" class='btn btn-success addqt'>+</button>
<input readonly type='text' class='qun text-center' value='0' style='width:30px;height:34px;'>
<button id="geen" class='btn btn-danger subqt'>-</button>
</td>
</tr>
</table>
</html>AngularJS代码
https://plnkr.co/edit/o4CJr5P696NdpP66Qkxh?p=preview
<tr ng-repeat="rec in records">
<td>{{rec.partno}}</td>
<td>{{rec.price}}</td>
<td>
<button id="neen" class='btn btn-success addqt'>+</button>
<input readonly type='text' class='qun text-center' value='0' style='width:30px;height:34px;'>
<button id="geen" class='btn btn-danger subqt'>-</button>
</td>
</tr>
最佳答案
使用 Plunker 中的代码，您需要执行以下操作:
- 向
records集合中的对象添加quantity属性。 - 在 Controller 中创建两个方法 - 一种用于递增，另一种通过接受记录参数来递减新的
quantity属性。 - 将 View 与新
quantity属性和两个新 Controller 方法的ng-model连接起来。
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [{
"partno": "ZB80900259",
"price": "619.74",
"quantity": 0
},
{
"partno": "Z80098330",
"price": "230.00",
"quantity": 0
}
];
$scope.increaseQty = (rec) => {
rec.quantity++;
};
$scope.decreaseQty = (rec) => {
rec.quantity--;
if (rec.quantity < 0) rec.quantity = 0;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="box">
<tr>
<th>Part No</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr ng-repeat="rec in records">
<td>{{rec.partno}}</td>
<td>{{rec.price}}</td>
<td>
<button id="neen{{$index}}"
class='btn btn-success addqt'
ng-click="increaseQty(rec)">+</button>
<input readonly
type='text'
class='qun text-center'
style='width:30px;height:34px;'
ng-model="rec.quantity">
<button id="geen{{$index}}"
class='btn btn-danger subqt'
ng-click="decreaseQty(rec)">-</button>
</td>
</tr>
</table>
</div>关于javascript - 如何将 jQuery 转换为 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50515353/