在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顯示信息。