Javascript 使用ng单击和ng隐藏/显示内部ng重复，角度

我有一个基本的单页网站使用角度。我使用了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>

.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;

控制器：

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

.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;

---

有更有效的方法吗？

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

我认为可能会发生闪烁，因为您隐藏了一个div，然后显示了另一个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>

Lorem ipsum dolor sit amet，是一位杰出的献身者。在fringilla est justo，nec pellentesque ex dictum et.Etiam laoreet，在调味品汽水中的justo，nisi sapien euismod dolor，vitae feugiat nulla dui eu eros。我们的效率是平等和平等的。这是一个很好的例子

也许可以试试：

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

Lorem ipsum Door sit amet，是一位杰出的运动员。在fringilla est justo，nec pellentesque ex dictum et.Etiam laoreet，在调味品汽水中的justo，nisi sapien euismod dolor，vitae feugiat nulla dui eu eros。我们的效率是平等和平等的。这是一个很好的例子

---

因此，如果Casey也有一个很好的建议，那么您只需添加alt类并显示信息。您希望为每个服务执行此操作。