0

A project that I'm working with has an image being rendered on the page through html written in javascript like the following:

imageHTML = "<div ng-click='showImage("+-1+", "+parentId+");' class='thumbnail'><img ng-src='{{parentImg}}' /></div>";

$scope.parentImg is assigned a b64 value later on, and it renders fine. My issue, is that when there are multiple images being rendered through this same line of code, the $scope.parentImg is overridden for the first image, and both images will have the same value, and therefore be the same image.

I am currently trying to create $scope.parentImg as an object like so:

$scope.parentImage[idOfObject] = "";
$scope.parentImage[idOfObject] = b64Value;

Then after two runs through the loop, $scope.parentImage will look like:

Object
51255135: "base64 Stuff asdfsaafasdfsafsadfdsaf"
43214213: "base64 Stuff asdfasdfasdfsadfadsfadf"

So, my question...how can I bind the following into the hardcoded html?

<img ng-src="parentImage[idOfObject]">

The value of this object is a base64 string as intended, but binding to ng-src doesn't work with assigning a dynamic key to bind.

Jaromjj
  • 326
  • 3
  • 17
  • 1
    Possible duplicate of [Insert an angular js template string inside an element](http://stackoverflow.com/questions/14846836/insert-an-angular-js-template-string-inside-an-element) – Ankh Jun 15 '16 at 14:29

2 Answers2

0

Using ng-repeat is one way of doing it:

<div ng-repeat="image in parentImage"">
    <img ng-src="{{img}}">
</div>
SoluableNonagon
  • 11,541
  • 11
  • 53
  • 98
0

You can use expression {{}} in value of attribute in angular like this

<img ng-src="{{parentImage[idOfObject]}}">

here is running example of this concept:

https://plnkr.co/edit/UbsXAB9ghEqKuIZJEstW?p=preview

Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168