如何在ng-repeat中更新ng-model？视图更新ng-model遇阻求助

嘿，作为刚接触Web开发的新手，碰到AngularJS里ng-model的问题太正常啦！我来帮你一步步解决这两个核心问题：

ng-repeat会为每一个循环项创建独立的子作用域，所以要正确更新ng-model，关键是绑定到数组项的属性上（而不是单独的原始类型变量），因为AngularJS的作用域继承是基于原型的，绑定对象属性能避免作用域隔离导致的同步问题。

举个适配你购物车场景的代码示例：

<div id="loadedCart" ng-show="ifLoadCart">
  <div ng-repeat="book in cartbooks" repeat-finish>
    <br>
    <!-- 用ng-src避免加载无效URL，绑定book的图片路径 -->
    <img ng-src="{{book.path}}" alt="img of book">
    <h6>{{book.name}}</h6>
    <!-- 直接绑定book的quantity属性，视图修改会自动同步到模型 -->
    <input type="number" ng-model="book.quantity" min="1" placeholder="数量">
    <!-- 点击删除时传递当前book的唯一标识（比如id） -->
    <button ng-click="deleteBook(book.id)">删除</button>
  </div>
</div>

对应的控制器里，你只需要确保cartbooks是一个对象数组（每个元素包含path/name/quantity/id等属性），这样在ng-repeat里修改book.quantity时，会直接同步回父作用域的cartbooks数组——因为对象是引用类型，子作用域和父作用域指向同一个对象。

从视图触发模型更新的核心逻辑是：在视图的交互事件（比如ng-click）中，修改$scope上绑定的数据源，AngularJS的双向绑定机制会自动完成视图和模型的同步。

针对你提到的deleteBook场景，控制器里可以这么写：

angular.module('yourAppName', [])
.controller('CartController', function($scope) {
  // 初始化购物车书籍数据（示例）
  $scope.cartbooks = [
    {id: 1, name: "AngularJS入门", path: "/images/book1.jpg", quantity: 1},
    {id: 2, name: "Web开发实战", path: "/images/book2.jpg", quantity: 2}
  ];
  $scope.ifLoadCart = true;

  // 删除书籍的方法：修改cartbooks数组（模型），视图会自动更新
  $scope.deleteBook = function(bookId) {
    // 过滤掉要删除的书籍，生成新数组
    $scope.cartbooks = $scope.cartbooks.filter(function(book) {
      return book.id !== bookId;
    });
    // AngularJS会在ng-click执行后自动触发脏检查，不需要手动调用$digest或$apply
  };

  // 如果需要手动触发模型同步（比如非Angular原生事件）
  // 可以用$apply包裹，比如：
  // document.getElementById('someBtn').addEventListener('click', function() {
  //   $scope.$apply(function() {
  //     // 这里修改$scope变量
  //   });
  // });
});

额外提醒两点：

• 如果你用的是原生JS事件（不是ng-click这类Angular指令），需要用$scope.$apply()包裹修改模型的代码，否则AngularJS不会检测到模型变化。
• 不要直接修改ng-repeat循环项的引用（比如book = {}），而是修改它的属性，这样才能同步回父作用域的数组。

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