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

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没有图片

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

};

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

2 个答案: