How to use ng-repeat inside the ui-Carousel library?

Asked

Viewed 98 times

2

Carousel works, but I’m not able to ng-repeat within the directive, how could I solve this?

In the controller I have the collection:

$scope.steps = [
    {id:1, text: 'nnoonon 1', current:1, collection:[]},
    {id:2, text: 'nnoonon 2', current:2, collection:[1, 2, 3, 4]},
    {id:3, text: 'nnoonon 3', current:3, collectiom:[]}
];

In view:

<ui-carousel
    slides="steps"
    slides-to-show="1"
    slides-to-scroll="1"
    autoplay="false"
    autoplay-speed="2000"
    dots="false">
    <carousel-item>
        {{item.id}}<br>
        {{item.text}}<br>
         <!-- MOSTRA A COLEÇÃO -->
        {{item.collection}}
         <div ng-show="item.current == 2"> 

           <!-- O NG-REPEAT NÃO FUNCIONA AQUI ??? -->
              <div ng-repeat="c in item.collection">{{c}}</div>
         </div>
     </div>
   </carousel-item>

</ui-carousel>

This is the library that I’m using.

To assist, I made a plunker what I need

  • 1

    Buddy, you can carry an example in Plunker?

  • Here’s a plunker: https://embed.plnkr.co/oM71yu/

  • Help me to help you friend, their pure demo is on their website, adapt your logic of "Steps" in this plunker please. Read more about How to create a Minimum, Complete and Verifiable example

  • @Jackson, I put in question the adapted plunker.

  • I don’t know if that helps, but there’s a </div> more than I should...

  • This plugin apparently is bugged friend, your loop was incorrect, by having 2 arrays, you need to do 2 levels of NG-REPEAT. But it still didn’t work. Control variables don’t work inside the slide, this plugin makes what’s in it private. I would switch to another. = > http://plnkr.co/edit/vo42VSAO2dAm9q8NDsSg?p=preview

  • from what I’ve seen, the plugin kills ng-repeat after loading.

  • Try to create a test variable in the controller with any value, and try to call it inside the carousel, it does not work. I find it very bad =/

  • the problem is that it compiles the carrosel. in the template.

  • var compiledElement = $compile(templateInstance)($scope);&#xA; el.addClass('ui-carousel').html('').append(compiledElement);

  • tried using ng-include also does not work.

Show 6 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.