AngularJS:ng之后，重复$scope值未按预期更新

AngularJS : After ng-repeat $scope values not updated as expected

本文关键字：更新 scope ng 之后 重复 AngularJS      更新时间：2023-09-26

我有一个控制器，它包含要用ng repeat迭代的数据，我将它与这个选择模型指令一起使用。

在使用ng repeat在DOM中创建多个条目后，到$scope.selectedItems的绑定将停止工作。

我知道ng repeat为每个迭代创建一个新的子作用域，但对selectedItems属性的更新不应该仍然通过绑定到MyController中的值来获取吗？

控制器：

(function() {
    angular.module('myModule', ['product.module'])
        .controller('MyController' ['$scope', 'SomeService' function($scope, ProductService) {
            $scope.selectedItems = [];
            $scope.productService = new ProductService()  //constructor pattern object
            $scope.products = $scope.productService.items;
            $scope.productService.fetchData(); //grabs data from server and sets the productService.items to an array of objects                
        }]);
})();

HTML

<div ng-controller="MyController">
<ul>
    <li ng-repeat="product in products"
        selection-model-type="checkbox"
        selection-model-mode="multiple"
        selection-model-selected-items="selectedItems">
        {{product.name}}
    </li>
</ul>

<div ng-controller="MyController"> <!-- this binding doesn't work after the ng-repeat takes place -->
    There are {{selectedItems.length}} products
</div>

productService.items可能一直引用同一个实例，但selectedItems肯定不会。仅使用一个控制器或将selectedItems放入服务中。

<div ng-controller="MyController">
<ul>
    <li ng-repeat="product in products"
        selection-model-type="checkbox"
        selection-model-mode="multiple"
        selection-model-selected-items="selectedItems">
        {{product.name}}
    </li>
</ul>
    There are {{selectedItems.length}} products
</div>
相关文章：