对滑块使用 ng-switch 和 ng-repeat

Question

我无法使这个 kind of slider 工作，从控制器获取数据。

这个例子工作正常：

<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

如果幻灯片的值是正确的，它应该可以检查我在这里创建的示例 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'}];

};

Answer 2

ng-switch-when 不支持表达式所以我建议你使用 ng-if 和 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>

Related Plunkr 没有图片

对滑块使用 ng-switch 和 ng-repeat

using ng-switch and ng-repeat for a slider

angularjs

slider

angularjs-animation

ng-switch