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

【问题标题】：Using ng-click and ng-hide/show inside ng-repeat, Angular在 ng-repeat、Angular 中使用 ng-click 和 ng-hide/show
【发布时间】：2015-08-10 01:17:44
【问题描述】：

我有一个使用 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;

有没有更有效的方法？

【问题讨论】：

标签： javascript html css angularjs

【解决方案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 时显示信息。

【讨论】：

@Casey 也有一个很好的建议。您想为每项服务都这样做。

【解决方案2】：

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

【讨论】：