CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
TheViking
TheViking

Reputation: 171

How to update another div based on the index in ui-bootstrap carousel?

I want to show images in a carousel and is using ui-bootstrap carousel in my Angular-project. When a image is showing in the carousel I want to update another DIV with text related to the image.

<div ng-controller="carouselCtrl">
      <div style="height: 305px; width:205px; align-content: center">
          <carousel interval="myInterval">
              <slide ng-repeat="player in players" >
                  <img ng-src="data:image/*;base64,{{player.ProfileImage}}" style="margin:auto;">
              </slide>
           </carousel>
       </div>
 </div>

My player object contains information about a player that I want to show in another div under the carousel. How can I do that?

Upvotes: 0

Views: 321

Answers (1)

Brocco
Brocco

Reputation: 64973

Based on the plnkr referenced in the ui.bootstrap documentation you can specify an active attribute on your slide tag

<slide ng-repeat="player in players" active="player.active">

So you can have another ng-repeat under your carousel under the one you have above, and conditionally show based upon the active attribute. Or use a filter to get just the active one.

I've output the slides json in this plnkr

Upvotes: 1

Related Questions