AngularJS ng-repeat中动态ng-model绑定失效问题求助

嘿，我来帮你排查这个问题！你遇到的情况很典型，问题出在ng-model的绑定方式和控制器里的赋值逻辑上，咱们一步步来修复它：

问题根源分析 #

你当前的代码里，ng-model用了Qty['{{$index}}']这种插值写法，这完全不符合AngularJS指令的语法规则；同时控制器里的属性访问方式也错了，导致双向绑定没有正确关联，所以虽然alert里能看到数值变化，但输入框的视图没同步更新。

解决方案1：修正Qty数组的绑定逻辑 #

1. 修正HTML里的ng-model

AngularJS的指令表达式不需要用{{}}插值，直接用数组索引即可：

<tr ng-repeat="item in resultShoppingCart track by $index">
    <td class="price" ng-bind="item.unitPrice"><span></span></td>
    <td class="qty">
        <!-- 去掉ng-value，ng-model会自动绑定值 -->
        <input class="form-control input-sm" type="text" ng-model="Qty[$index]">
        <a href="" ng-click="addQuantity(item.quantity, item.productId, $index)"><i class="fa fa-plus"></i></a>
        <a href="#"><i class="fa fa-minus"></i></a>
    </td>
    <td class="price" ng-bind="item.price"><span>$99.00</span></td>
    <td class="action"><a ng-click="delete(userId,item.productId)">Delete item</a></td>
</tr>

2. 在控制器里初始化Qty数组

必须先让$scope.Qty成为一个可追踪的数组，不然第一次绑定会失效：

// 假设你已经获取到了购物车数据
$scope.resultShoppingCart = [/* 你的购物车条目 */];
// 初始化Qty数组，对应每个条目的数量
$scope.Qty = [];
$scope.resultShoppingCart.forEach((item, idx) => {
    $scope.Qty[idx] = item.quantity;
});

3. 修正addQuantity函数的赋值逻辑

你之前的属性访问方式完全错误，直接用数组索引访问即可：

$scope.addQuantity = function (currentQuantity, productId, i) {
    $scope.Qty[i] = currentQuantity + 1;
    // 如果需要同步更新原item的quantity，加上这行：
    // $scope.resultShoppingCart[i].quantity = $scope.Qty[i];
    console.log($scope.Qty[i]); // 用console.log替代alert更调试友好
}

解决方案2：更简洁的直接绑定方案（推荐） #

其实你完全不需要额外维护Qty数组，ng-repeat里的item本身就支持双向绑定，这样代码更简洁，也不容易出错：

HTML修改：

<tr ng-repeat="item in resultShoppingCart track by $index">
    <td class="price" ng-bind="item.unitPrice"><span></span></td>
    <td class="qty">
        <input class="form-control input-sm" type="text" ng-model="item.quantity">
        <!-- 直接把item传入函数，省去多余参数 -->
        <a href="" ng-click="addQuantity(item)"><i class="fa fa-plus"></i></a>
        <a href="#"><i class="fa fa-minus"></i></a>
    </td>
    <td class="price" ng-bind="item.price"><span>$99.00</span></td>
    <td class="action"><a ng-click="delete(userId,item.productId)">Delete item</a></td>
</tr>

控制器函数简化：

$scope.addQuantity = function (item) {
    item.quantity += 1;
    // 这里可以直接用item.productId做后续的后端更新操作
    console.log("更新后的数量：", item.quantity, "商品ID：", item.productId);
}

这种方式直接绑定原数据对象，AngularJS的双向绑定会自动同步视图，完全避免了额外数组维护的麻烦。

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