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?

Answer 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

Answer 2

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 .