如何在AngularJS 1.x ng-repeat表格中实现多行数量增减及jQuery转译

没问题，我来帮你把这个jQuery的数量增减逻辑转成AngularJS 1.x的写法——毕竟Angular是数据驱动的，不用像jQuery那样直接操作DOM元素，咱们换个思路来实现~

第一步：调整数据结构与控制器逻辑 #

首先，你需要给records数组里的每个对象添加一个quantity属性，用来存储对应行的数量值，这样Angular才能通过数据绑定自动更新视图。同时在控制器里定义增减数量的方法：

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.records = [
      { partno: 'ZB80900259', price: 619.74, quantity: 0 },
      { partno: 'Z80098330', price: 230.00, quantity: 0 }
      // 其他记录同理添加quantity属性
    ];

    // 增加数量的方法
    $scope.addQuantity = function(rec) {
      rec.quantity += 1;
    };

    // 减少数量的方法（加个判断避免负数）
    $scope.subtractQuantity = function(rec) {
      if (rec.quantity > 0) {
        rec.quantity -= 1;
      }
    };
  });

第二步：修改HTML模板（用Angular指令替代DOM操作） #

把原来依赖类名的按钮和input改成Angular的指令绑定，完全抛弃jQuery式的DOM操作：

<!-- 记得先引入AngularJS脚本，并指定ng-app和ng-controller -->
<div ng-app="myApp" ng-controller="myController">
  <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 class='btn btn-success' ng-click="addQuantity(rec)">+</button>
        <input readonly type='text' class='qun text-center' ng-model="rec.quantity" style='width:30px;height:34px;'>
        <button class='btn btn-danger' ng-click="subtractQuantity(rec)">-</button>
      </td>
    </tr>
  </table>
</div>

关键变化说明 #

• 去掉了原来的addqt、subqt类和重复的id（Angular里不需要这些来绑定事件）
• 用ng-click指令绑定控制器里的方法，并且把当前行的rec对象传进去，直接修改对应行的数量数据
• input用ng-model绑定rec.quantity，数据变化时视图会自动同步更新
• 减法方法里加了rec.quantity > 0的判断，避免数量变成负数，提升用户体验

内容的提问来源于stack exchange，提问作者Sherin Green