Angular - updating item in function

Question

How can I update an item from a ng-repeat in a function? I have the following code. The repeat in my HTML file:

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

I'm using Angular modal service (http://dwmkerr.github.io/angular-modal-service/) and created the following function in the 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;
            })
        })
    }

In priceCtrl I inject $scope, item and close and copy item to the scope.

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

I created a close() and cancel() function also in this controller:

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

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

The problem is as follows: When I update some property's from item and click the cancel() button, nothing happens. That's fine. But, when I change some property's and I click close(), the item will be updated via $scope.updateItem(), but the item in the ng-repeat will not be updated.

How can I solve this?

Zach · Accepted Answer · 2016-10-11 15:15:11Z

Since you're not modifying the original, you need to replace the item at that index of the array with the the new item:

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

Remember that the array is a bunch of pointers in memory. item is a local variable pointing to that one item in memory but when you do item = result.item; you're setting that local item variable to point to a new address and not the index in the array.

cenk ebret · Accepted Answer · 2016-10-11 15:00:18Z

2

at the and of your close function you can do:

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

this.

answered Oct 11, 2016 at 15:00

cenk ebret

6974 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular - updating item in function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related