Как я могу использовать ng-click для динамической перезагрузки данных ng-repeat?

У меня есть страница, содержащая директиву 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>

ПредметыCtrl:

$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 с новыми данными, полученными с моего сервера.


angularjs angularjs-directive angularjs-ng-repeat
person Stephanie Caldwell    schedule 23.07.2013    source источник
comment
ваш код попадает внутрь функции успеха, и вы получаете правильный массив с сервера. Пожалуйста, проверьте сетевые данные на вкладке сети Chrome   -  person Ajay Beniwal    schedule 23.07.2013

Ответы (1)


arrow_upward
10
arrow_downward

Добавьте трансляцию в свой обратный вызов и подпишитесь на нее в своем контроллере.

Кстати, это действительно должно быть в сервисе

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;
    });
};

В вашем контроллере:

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

Поэтому всякий раз, когда вы ng-click="update(id)"

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

Ваш items будет автоматически обновляться, так как на него оформлена подписка.

person Dan Kanze    schedule 23.07.2013
comment
Где разместить блок кода itemsService.loadItems =? Он входит в модуль? - person Stephanie Caldwell; 25.07.2013
comment
@StephanieCaldwell Это стиль объявления объекта в службе. Посмотрите сервисные функции. - person Dan Kanze; 25.07.2013
comment
Кто-нибудь, пожалуйста, предоставит рабочий jsfiddle или демо-версию для того же? - person Parth; 09.04.2015