Angularjs variable value is not updating

Question

I am using angular with bootstrap modal,i have a json stored in a scope variable products in a controller as follow

controllers.productController = function($scope) {
$scope.products = {"meta": {"total_count": 3}, "objects": [{ "id": 3, "image": "/media/products/1/Product007_image.JPEG", "image2": "/media/products/1/Product007_image2.JPEG",}, {"id": 4, "image": "/media/products/1/Product009_image.JPEG", "image2": "/media/products/1/Product009_image2.JPEG"},{"id": 13, "image": null, "image2": null}]}
$scope.fetchModal = function(index) {
   $scope.activeProd = index;
   $('#product_desc').modal();
}
}

index.html

    <div ng-controller="productController">
<div class="product-list">
    <span ng-repeat="product in products.objects" ng-click="fetchModal(index)" >{{ product.id }}</span>
    </div>
    <div id="product_desc">
    <img ng-src="{{products.objects[activeProd].image }}" />
    {{ products.objects[activeProd].id }}
    </div>
    </div>

it works all fine, the problem is that if i click on a product in product-list which has image it renders modal with image and then click on a product which have image value null i.e no image, in its model the previous product image still exist instead i should get nothing. I hope i am clear to my point

i observed that the ng-src is changing and assigning to null but the src attribute is not changing

so during the second click, id is changing but previous image is being displayed? — Subin Sebastian
– Subin Sebastian, Commented Dec 14, 2014 at 6:34
i will try making a fiddle , till then i just observered that the ng-src is changing and assigning to null but the src attribute is not changing — Sri Kanth
– Sri Kanth, Commented Dec 14, 2014 at 9:52

Community · Accepted Answer · 2017-05-23 10:27:24Z

1

I think your problem is that when you change the ng-src to null the older value is retained in the image source.

This is the proper angular behavior. You can find the details on this thread :

https://stackoverflow.com/a/22094392/1649235

If you go through this thread you will also find a workaround i.e. don't put your image path as null where it is supposed to be empty, put it equal to '//:0'.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Dec 14, 2014 at 9:43

Anuj

782 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs variable value is not updating

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related