在ng-repeat中使用ng-click和ng-hide / show / Angular

Question

我有一个使用Angular的基本单页网站。 我已经使用ng-repeat来生成主页上的某些内容。 重复中的每个项目都是一幅图像，我想为每个项目提供一个替代视图，以显示更多细节。 我有一个基本的实现，视图使用ng-hide / show切换。 但是似乎有些闪烁，我怀疑每张照片的视图都在切换； 而不是一个点击。

这是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;
}

控制器：

  $scope.show = true;

有更有效的方法吗？

Answer 1

您是否尝试过在每个服务对象上添加布尔显示字段。 那么ng-show =“ service.show”和ng-click =“ service.show =！service.show”？ 那就是我建议的处理方式

Answer 2

我认为闪烁可能正在发生，因为您要隐藏一个div，然后显示另一个。 现在您有：

<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='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>

这样您就可以添加alt类，并在show == true显示信息。