0

For the nested elements shown below, all the DIVs are shown at once in the page. Also, left and right is not working.

I tested the condition ng-if for active DIV and it is working fine (means only one DIV is active).

Please have a look at the below code

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div ng-repeat="(key1, table) in tables">
            <div ng-repeat="(key2, row) in table.rows">
                <div ng-repeat="(key3, cell) in row.cells">
                    <div ng-repeat="(key4, widget) in cell.widgets" >
                        <div class="item active" ng-if="key1===0 && key2===0 && key3===0 && key4===0" >
                            <img src="img_chania.jpg" alt="Chania" width="460" height="345">
                        </div>
                        <div class="item" ng-if="key1!=0 || key2!=0 || key3!=0 || key4!=0">
                            <img src="img_flower.jpg" alt="Flower" width="460" height="345">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
helmbert
  • 35,797
  • 13
  • 82
  • 95
nirajkumar
  • 335
  • 1
  • 3
  • 14
  • You may need to initialize the carousel after `ng-repat` is complete. See http://stackoverflow.com/questions/13471129/ng-repeat-finish-event. – isherwood Jun 23 '15 at 18:40
  • can you please provide me the example. There are four ng-repeat I dont know how to do it . Can you please modify the above example for the same. – nirajkumar Jun 23 '15 at 18:46
  • could you create a plunkr with a problem? – Pankaj Parkar Jun 23 '15 at 18:53
  • Have you tried adding an ng-class as described in this solution: http://stackoverflow.com/questions/16156277/angular-js-repeater-bootstrap-carousel – Matt Jun 23 '15 at 19:05
  • Thanks ... But how to do it for nested ng-repeat loop as I mentioned in my example .. – nirajkumar Jun 24 '15 at 05:54

0 Answers0