AngularJS display svg file on page

Question

I have an angularJS service that reads data from a json file and returns me an object with a few SVG image file names.

I have a ng-repeat on the return object to look and display all the SVG files on the page.

Here is my ng-repeat on my template

<div ng-repeat="items in libCtrl.categories track by $index">
  <div ng-include="img/library/items.categoryImage"></div>
</div>

This code does not display any SVG image file on the page. But if I hardcode the value of the file names on the ng-include it works.

<div ng-repeat="items in libCtrl.categories track by $index">
  <div ng-include="'img/library/myfile.svg'"></div>
</div>

How can I get it to work using the data from my items.categoryImage?

Joy · Accepted Answer · 2015-09-18 03:29:49Z

4

Check working demo: Plunker.

Use <div ng-include="'img/library/' + items.categoryImage"></div>

answered Sep 18, 2015 at 3:29

Joy

9,60011 gold badges50 silver badges99 bronze badges

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

1 Answer 1