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

Using ng-click and ng-hide/show inside ng-repeat, Angular

本文关键字：ng-hide show ng-click ng-repeat      更新时间：2023-09-26

我有一个使用Angular的基本单页网站。我使用了ng-repeat来生成主页面的一些内容。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;

有更有效的方法吗?

我认为闪烁可能是因为你隐藏了一个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。

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

相关文章：