如何将li元素绑定到ng-repeat内的id,以显示不同li的不同图像

时间:2015-07-29 12:13:21

标签: javascript jquery html css angularjs

这是我的HTML代码

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

这是我的css:

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

我想在这里尝试实现的是在不同的锚元素前面显示不同的图像。

我在离子移动中使用角度向导,并自定义进度条元素的外观。这是链接http://mgonto.github.io/angular-wizard/

任何帮助都将不胜感激!!

1 个答案:

答案 0 :(得分:0)

更新:

我想我想念你的问题。这就是你需要的吗?

将所有图像放在“step.images”中并显示全部再次进行ng-repeat。

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

如果每个“步骤”只有1张图像,则不需要再为图像使用ng-repeat。

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

然后只需修改你的css就可以随心所欲地显示它。

这就是你需要的吗?