0

Using 1.5.8 other questions haven't provided a solution

I'm displaying images from an array of objects that users can remove by clicking on the image. I want the element in the array to be an empty object after they remove it so there's an empty cell in the view.

<div class="insert-items row m-t-2">
    <div class="col-xs text-xs-center slot-item-wrapper" ng-repeat="item in create.availableSlots track by $index">
        <div class="slot-item" ng-click="create.removeItemFromSlot(item.id)">
            <img ng-src="{{item.img}}" alt="" />
        </div>
    </div>
</div>

And the JS

function removeItemFromSlot(id){
    _.each(create.availableSlots, function(item, i){
        if(id === item.id){
            create.availableSlots[i] = {};
        }
    });
}

this does what it intends to... but the item.img is still displaying the old img but there's nothing in the object anymore...

I have a feeling it's because i'm using track by $index and angular can't update the view without it? I have tried using $scope.apply() but it tells me there's already a digest cycle error in the log. Is there a way to update the view using track by here?

Garuuk
  • 2,153
  • 6
  • 30
  • 59
  • I think you need to set item.img to be either a blank string, or even refer to a one pixel transparent image – Mikkel Oct 21 '16 at 21:30
  • turns out the ng-src was the issue. I found the answer here. http://stackoverflow.com/questions/22092687/empty-ng-src-doesnt-update-image – Garuuk Oct 21 '16 at 21:45

0 Answers0