Search code examples
javascriptarraysangularjsdynamic-arraysionic-framework

Dynamic path as Object parameter


I have an array which is a serie of object looking just like this one :

 $scope.dishList = [
   {    nameEnglish: 'onion soup', 
        nameLocal: 'soupe a loignon',
        description: 'xxxxx',
        region: 'vanitia',
        itemid: 'IT022',
        cuisineTypeIsoCode: 'IT',
        imageSource: '( "img/" + dish.cuisineTypeIsoCode + "/" + dish.itemid + "small.jpg")',

    }
    // some more similar objects

];

Every image name is constructed as follows" IT001small.jpg, IT002small.jpg etc and is stored in img/{{cuisineTypeIsoCode}}/img.pjg

I would like to include the path to the images in that array so I can then use this parameter in my HTML template with the {{dish.imageSource}} statement (see below)

    <article class="item_frame">
        <a class="" href="#"><img class="bookmark_icon" src="img\bookmark_plus_whitev3.png">
        </a>
        <img class="item_main_image" ng-src="{{dish.imageSource}}">
        <img class="item_icon_circled" src="img/dishiconv4orangecircled.png">
        <h1 class="item_name_english">{{dish.nameEnglish}}</h1>
        <h2 class="item_name_local_language">{{dish.nameLocal}}</h2>
        <p class="item_description ">{{dish.description}}</p>
        <div class="subcuisine_container_w_flag">
            <span class="subcuisine_text_in_dish_pages"> | {{dish.region}}</span>
            <img class="flag_in_dishpages" src="img/flag.png">
        </div>  
    </article><!--main article frame 1 -->   

I have tried several things but could not get anything to work ... Any idea please ? thanks


Solution

  • Not exact answer but Better Alternate Approach, I think you can replace with following one:

    <img class="item_main_image" ng-src="img/{{dish.cuisineTypeIsoCod}}/{{dish.itemid}}small.jpg">
    

    Happy Helping!