Using ng-click and ng-hide/show inside ng-repeat, Angular

Question

I have a basic Single Page Website using Angular. I have used an ng-repeat to generate some of the content on the main page. Each item in the repeat is an image, and I want to have an alternate view for each one, showing more detail. I have a basic implementation for this and the views are toggling using ng-hide/show. However there seems to be a slight flicker, and I suspect all of each photos view is toggling; as opposed to the one clicked.

Here is the HTML:

<div class="row">
    <div class="col-sm-6 col-md-4" ng-repeat='service in services'>
      <div class="thumbnail">
        <div class='image-container' ng-show="show" ng-style="{'background-image': 'url(' + service.photo + ')'}">
        </div>
        <div class='image-container alt' ng-hide='show' ng-style="{'background-image': 'url(' + service.photo + ')'}">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
        </div>
        <div class="caption">
          <h4>{{ service.name }}</h4>
          <button ng-click="show=!show" class='service-button'>More Info</button>
        </div>
      </div>
    </div>
  </div>

CSS:

.service-button
{
  position: absolute;
  bottom: 40px;
  right: 30px;
}

.image-container
{
  width:100%; 
  height:300px;
}

.alt
{
  opacity: 0.4;
  font-size: 1.4em;
  padding: 10px;
  color: black;
}

Controller:

  $scope.show = true;

Is there a more efficient way of doing this?

Jeremy Jackson · Accepted Answer · 2015-08-09 17:17:44Z

1

I think the flicker may be happening because you're hiding one div and then showing the other. Right now you have:

<div class='image-container' ng-show="show" ng-style="{'background-image': 'url(' + service.photo + ')'}">
</div>
<div class='image-container alt' ng-hide='show' ng-style="{'background-image': 'url(' + service.photo + ')'}">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>

Maybe try:

<div class='image-container' ng-class="{'alt': show == true}" ng-style="{'background-image': 'url(' + service.photo + ')'}">
       <p ng-show="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla est justo, nec pellentesque ex dictum et. Etiam laoreet, justo in condimentum sodales, nisi sapien euismod dolor, vitae feugiat nulla dui eu eros. Ut efficitur vel ipsum et pellentesque. Sed placerat risus eget euismod mattis.</p>
</div>

So that you're just adding that alt class and showing the info if show == true.

answered Aug 9, 2015 at 17:17

Jeremy Jackson

2,25718 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeremy Jackson Over a year ago

@Casey has a good suggestion too. You want to do it for each service.

Casey · Accepted Answer · 2015-08-09 17:12:10Z

1

Have you tried adding a boolean show field on each service object. So ng-show="service.show" and ng-click="service.show=!service.show"? That would be my suggested way of handling it

answered Aug 9, 2015 at 17:12

Casey

8054 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using ng-click and ng-hide/show inside ng-repeat, Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related