对滑块使用ng开关和ng重复

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>

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

<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-switch-when 相同的ng-if工作

<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'}];

}；