angularjs - 如何使用ng-click动态重新加载ng-repeat数据？

Question

我有一个包含ng-repeat指令的页面。首次加载页面时ng-repeat可以工作，但是我希望能够使用ng-click刷新ng-repeat的内容。我已经尝试了以下代码，但是没有用。有什么建议么？

<div ng-click="loadItems('1')">Load 1st set of items</div>
<div ng-click="loadItems('2')">Load 2nd set of items</div>
...

<table>
    <tr ng-repeat="item in items">>
        // stuff
    </tr>
</table>

ItemsCtrl:

$scope.loadItems = function (setID) {
    $http({
        url: 'get-items/'+setID,
        method: "POST"
    })
    .success(function (data, status, headers, config) {
        $scope.items = data;
    })
    .error(function (data, status, headers, config) {
        $scope.status = status;
    });
};

我希望对 loadItems()的调用将导致 ng-repeat指令重新加载从服务器获取的新数据。

Answer 1

在您的回调中添加广播，然后在您的 Controller 中进行订阅。

这真的应该在服务中

itemsService.loadItems = function (setID) {
    $http({
        url: 'get-items/'+setID,
        method: "POST"
    })
    .success(function (data, status, headers, config) {
        $scope.items = data;
        $rootScope.$broadcast('updateItems', data);
    })
    .error(function (data, status, headers, config) {
        $scope.status = status;
    });
}; 

在您的 Controller 中:

$scope.$on("updateItems",function(d){
  $scope.items = d;
});

所以每当你 ng-click="update(id)"

$scope.update = function(id){
    itemsService.loadItems(id);
}

您的 items将自动更新，因为已订阅。