angularjs - 使用 ng-switch 和 ng-repeat 作为滑块

Question

我不能让这种滑块工作，从控制器获取数据。

这个例子工作正常：

<div class="panel panel-default" ng-controller="SliderCtrl">
    <div class="panel-body"  ng-switch="selectedSlide">
        <img  src="img0.jpg" ng-switch-when="0" class="my-switch-animation" />
        <img  src="img1.jpg" ng-switch-when="1" class="my-switch-animation" />
        <img  src="img2.jpg" ng-switch-when="2" class="my-switch-animation" />
        <img  src="img3.jpg" ng-switch-when="3" class="my-switch-animation" />
        <img  src="img4.jpg" ng-switch-when="4" class="my-switch-animation" />
        <img  src="img5.jpg" ng-switch-when="5" class="my-switch-animation" />
    </div>
</div>

但是，如果我将 img 标记更改为ng-repeat应该导致相同代码的 a，它就不起作用。

<div class="panel panel-default" ng-controller="SliderCtrl">
    <div class="panel-body"  ng-switch="selectedSlide">
        <img  ng-repeat="slide in slides" src="{{ slide.img }}" ng-switch-when="{{ slide.id }}" class="my-switch-animation" />
    </div>
</div>

我怎样才能做到这一点？

Answer 1

ng-switch-when不支持表达式，所以我建议你使用ng-if与 like 相同的工作ng-switch-when

<div class="panel panel-default" ng-controller="SliderCtrl">
    <div class="panel-body">
        <img  ng-repeat="slide in slides" src="{{ slide.img }}" ng-if="slide.id == selectedSlide" class="my-switch-animation" />
    </div>
</div>

相关 Plunkr无图像

Answer 2

如果幻灯片的值是正确的，它应该可以检查我在这里创建的示例http://jsfiddle.net/tRxzr/636/

function Ctrl() {
this.slides = [
    {src: 'http://www.w3schools.com/angular/pic_angular.jpg'}, 
    {src: 'http://www.ocpsoft.org/wp-content/uploads/2013/01/angularjs.png'}];

};