Angular-wizard : How to bind the li element to an id inside ng-repeat to display different images for different li

ionic-v1
1

I am using the angular-wizard in ionic for mobile, and customizing the look and feel of the progress bar element. Here is the link http://mgonto.github.io/angular-wizard/

This is my html code

<ul class="steps-indicator">
    <li ng-repeat="step in steps">
        <a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
    </l'>
</ul>

And this is my css :

.steps-indicator li a:before{
    content:url('/img/wizard-arrow.png') no-repeat;
}

The thing i am trying to achieve here is to show different images in front of different anchor elements. Something like this

image
unnamed1.png715×95 20.9 KB

Any help would be appreciated!! @Calendee @mhartington

2

You should be able to just do this.

<ul class="steps-indicator">
    <li ng-repeat="step in steps">
        <img ng-src="{{step.icon}}">
        <a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
    </li>
</ul>
3

Could you please provide a codepen as i am not able to figure it out . I made this change and in my html file but its not displaying the image

wz-step title=“Basic Info” icon = “img/rightArrow.png”

4

Can you provide a codepen of what you have so far?

5

Here is a sample codepen , What i want to do is replace the arrow with different pics like above

See the Pen rVQojO by Gaurav Sarma (@gau4sar) on CodePen.

Any help @mhartington ??