Anirban Mishra Anirban Mishra - 1 month ago 17
AngularJS Question

ng repeat not displaying images

var name = last_name + ',' + first_name;
if(party=="R")
party="<img src='/images/r.png'>";
else
party="<img src='/images/d.png'>";
if(chamber == "senate")
chamber="<img src='/images/s.svg'>Senate";
else
chamber="<img src='/images/h.png'>House";
$scope.users.push({
party_name:party,
fullname:name,
chamber_name:chamber,
district_name:district,
state_name:state});


The HTML part

<tr ng-repeat="user in users">
<td>{{user.party_name}}</td>
<td>{{user.fullname}}</td>
<td>{{user.chamber_name}}</td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
</tr>


When I try to do this its prints the image tags instead of the image itself. The other variables in push are Strings. The string parts are displayed properly.Can someone please help me??

Answer

Use Just the src of the image as the string

var name = last_name + ',' + first_name;
if(party=="R")
    party="/images/r.png";
else
    party="/images/d.png";
if(chamber == "senate")
    chamber="/images/s.svg";
else
    chamber="/images/h.png";
$scope.users.push({
    party_name:party,
    fullname:name,
    chamber_name:chamber,
    district_name:district,
    state_name:state});

Then in the html use an <img> with binding to the src attribute

<tr ng-repeat="user in users">
    <td> <img src="{{user.party_name}}" /> </td>
    <td>{{user.fullname}}</td>
    <td> <img src="{{user.chamber_name}}" /> </td>
    <td>{{user.district_name}}</td>
    <td>{{user.state_name}}</td>
</tr>

PLUNKER