2

I can't make this kind of slider work, taking data from the controller.

This example works fine:

<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>

But if I change the img tag for a ng-repeat which should result in the same code, it doesn't work.

<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>

How can I achieve that?

cor
  • 3,323
  • 25
  • 46

2 Answers2

1

ng-switch-when doesn't support expression so I'd suggest you to use ng-if work same as 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>

Related Plunkr Without images

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
0

If value of slides is correct its should work check the example I have create here 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'}];

};

Rishi Saraf
  • 1,644
  • 2
  • 14
  • 27
  • Thanks for the answer, but your example is not using ng-repeat inside ng-switch directive – cor Mar 18 '15 at 11:12