Question

如何在函数中更新ng-repeat中的项目？我有以下代码。我的HTML文件中的重复：

<div ng-repeat='item in collection'>
    <div class="product-item">
        <img src="{{item.image}}"/>
        {{item.name}}
        {{item.price}}
        <a ng-href='' ng-click='showPricePopup(item)'>Update price</a>
    </div>
</div>

我使用Angular模态服务（http://dwmkerr.github.io/angular-modal-service/）并在Controller中创建了以下功能：

$scope.showPricePopup = function(item){
        ModalService.showModal({
            templateUrl: "/winkelier/modal/price",
            controller: "priceCtrl",
            inputs: {
                item: item
            }
        }).then(function(modal) {
            modal.close.then(function(result) {
                console.log("result", result.item);
                $scope.updateItem(result.item);
                item = result.item;
            })
        })
    }

在priceCtrl中我注入$ scope，item并关闭并复制项目到范围。

angular.module('myApp').controller('priceCtrl', ["$scope", "$http", 'item', 'close', function($scope, $http, item, close) {

    $scope.modalitem = angular.copy(item);
    $scope.savedmodalItem = angular.copy($scope.modalitem);

我在此控制器中也创建了close()和cancel()功能：

$scope.close = function(){
    close({
        item: $scope.modalitem
    }, 500);
}

$scope.cancel = function(){
    $scope.modalitem = angular.copy($scope.savedmodalItem);
    close({
        item: $scope.modalitem
    }, 500);    
}

问题如下：当我从项目更新某些属性并单击cancel()按钮时，没有任何反应。没关系。但是，当我更改某些属性并点击close()时，该项目将通过$scope.updateItem()更新，但ng-repeat中的项目不会更新。

我该如何解决这个问题？

Answer 1

在你的近距离功能中你可以做到：

var close = function () {
    // do what you do before
    $scope.$apply();
}

此。

Answer 2

由于您没有修改原件，因此需要使用新项替换该数组索引处的项：

$scope.showPricePopup = function(item){
    var itemIndex = $scope.collection.indexOf(item); // get the index
    ModalService.showModal({
        templateUrl: "/winkelier/modal/price",
        controller: "priceCtrl",
        inputs: {
            item: item
        }
    }).then(function(modal) {
        modal.close.then(function(result) {
            console.log("result", result.item);
            $scope.updateItem(result.item);
            $scope.collection[itemIndex] = result.item; // replace the item at that index
        })
    })
}

请记住，数组是内存中的一堆指针。 item是一个局部变量，指向内存中的一个项目，但当您执行item = result.item;时，您将本地 item变量设置为指向新地址而不是数组中的索引。

Angular - 更新函数

2 个答案: