AngularJS：ng-repeat $scope 值未按预期更新后答案

【问题标题】：AngularJS : After ng-repeat $scope values not updated as expectedAngularJS：ng-repeat $scope 值未按预期更新后
【发布时间】：2015-04-09 02:34:55
【问题描述】：

我有一个控制器，其中包含要通过 ng-repeat 进行迭代的数据，我将它与 this selection model directive 一起使用。

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

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

控制器：

(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>

【问题讨论】：

我可以看到的一个可能的问题是fetchData，如果该方法正在执行类似items = <new-array> 的操作，那么它将不起作用，因为您的$scope.products 仍将引用旧数组跨度>
尝试将ng-repeat="product in products"改为ng-repeat="product in productService.items"
您有两个Mycontroller 实例。 {{selectedItem.length}} 将没有您在 ng-repeat 中选择的选定项目..
@ArunPJohny 感谢您的回复，但产品实例中的代码只会更改数组，而不会创建新数组。只是想确保这个问题的未来读者也理解这一点。

标签： javascript angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

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>

【讨论】：