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

StackOverflow https://stackoverflow.com/questions/23114825

  •  04-07-2023
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top