1. Home
  2. Forum
  3. AngularJS
  4. Change imagePath of ng-src

Change imagePath of ng-src

Hello,
i have a cart on my page. The image changes if the cart is filled by 0-6 items.
So i have 7 times the expression and want to put that in just one .
So how can i put a
"if (cart.getItems().length) ... === 0" then --> image0
"if (cart.getItems().length) ... === 1" then --> image1
"if (cart.getItems().length) ... === 2" then --> image2
...
"if (cart.getItems().length) ... === 6" then --> image6

For example one expression:
ng-show="cart.getItems().length < 1" ng-hide="cart.getItems().length > 0">
    class="imgShopCart" ng-src="../resources/images/shoppingcartClear.png">
Some source of my js. data:
.service('cartService', function () {
    let items = [];
    return {
        getItems: function () {
            return items;
        },
        addArticle: function (article) {
            items.push(article);
        },
        removeArticle: function ($index) {
            items.splice($index, 1);
        },
        removeAll: function () {
            items = [];
        },
        sum: function () {
            return items.reduce(function (total, article) {
                return total + article.price1
            }, 0);
        }
    };
})
.controller('ArticlesCtrl', function ($scope, $http, cartService) {
    $scope.cart = cartService;

    $http.get('articles.json').then(function (articlesResponse) {
        $scope.articles = articlesResponse.data;
    });
})

.controller('CartCtrl', function ($scope, cartService) {
    $scope.cart = cartService;
})

1 Reply
DL Deepa Loganathan Syncfusion Team September 21, 2018 10:40 AM UTC

Hi Christian Zierold,  
 
Thanks for contacting Syncfusion support.   
 
We understand your requirement for conditionally rendering the image element based on the number of items selected and have prepared a sample as per your requirement.   
 
Sample  
 
Here, we have fetched the item details from service in controller and bound it to view and conditionally rendered the image based on the item’s length using ng-show directive, wherein the image name is based on the number of items available in cart.   
 
<body>  
  
    <div ng-controller="ArticlesCtrl">  
        <div ng-show="cartlength > 0">  
            <img class="imgShopCart" ng-src="images/{{cartlength}}.png" />  
            <div>Returned Item length: {{cartlength}}</div> // image name is based on the number of items available in cart.  
        </div>  
    </div>  
  
    <script>  
  
        angular.module('CartCtrl', [])  
  
            .service('cartService', function () {  
                let items = ['1', '2', '3', '4'];  
                return {  
                    getItems: function () {  
                        return items;  
                    },  
                    addArticle: function (article) {  
                        items.push(article);  
                    },  
                    removeArticle: function ($index) {  
                        items.splice($index, 1);  
                    },  
                    removeAll: function () {  
                        items = [];  
                    },  
                    sum: function () {  
                        return items.reduce(function (total, article) {  
                            return total + article.price1  
                        }, 0);  
                    }  
                }  
            })  
            .controller('ArticlesCtrl', function ($scope, cartService) {  
                $scope.data = cartService.getItems();  
                $scope.cartlength = cartService.getItems().length;  
            });  
    </script>  
</body>  
 
Please let us know if you need any further assistance.   
 
Thanks,  
Deepa L. 


Loader.
Up arrow icon