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

Question

我有一个使用 Angular 的基本单页网站。我使用 ng-repeat 在主页上生成了一些内容。重复中的每个元素都是一个图像，我希望每个元素都有一个替代 View ，以显示更多细节。我有一个基本的实现， View 使用 ng-hide/show 切换。但是似乎有轻微的闪烁，我怀疑所有照片 View 都在切换；而不是点击的那个。

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

有没有更有效的方法？

Answer 1

我认为闪烁的发生可能是因为您隐藏了一个 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 时显示信息。