Javascript Angular：为什么我的div没有使用ng show/ng hide显示/隐藏？

我正在尝试为一些图像制作一个超级简单的灯箱。基本上，我有一个div，其中有一组使用ng repeat显示的图像，我想在单击其中一个图像时显示lightbox div。我不明白为什么我的lightbox div不会出现。这是我的密码：

angular.module（'myApp'）
.controller（'PhotosCtrl'，['$scope'，函数PhotosCtrl（$scope）{
$scope.photos=[
{
src:“/images/img1.png”，
标题：“”
},
{
src:“/images/img2.png”，
标题：“”
}
];
$scope.larges=[
{
src:'/images/img1lg.png'，
标题：“”
},
{
src:'/images/img2 lg.png'，
标题：“”
}
];
}]);
.photowrap{
最大宽度：85%；
保证金：0自动；
填充：12px0；
显示器：flex；
柔性流：行换行；
证明内容：中心；
背景色：#fff；
}
.照片{
保证金：0；
}
.照片{
最大高度：250px；
边框：2px实心#ebebebeb；
边界半径：5px；
}
p、 标题{
显示：无；
}
.灯箱{
最大宽度：85%；
保证金：0自动；
背景色：rgba（255255,0.6）；
位置：绝对位置；
}
.lbphoto{
最大宽度：100%；
最大高度：100%；
显示：块；
保证金：0自动；
}
因为在每次迭代中
ng repeat
都会创建一个典型继承的子范围。因此，在创建子作用域时，
object
value会在子作用域内传递引用，但基本类型值只是传递初始值。当在子范围内修改基元类型值（此处为
showme
）时，该变量将在子范围内创建一个新副本（当
ng单击
ng repeat
的
int
更改
showme
的值时，它将是
showme
的新变量副本）。您可以借助引用类型
对象
来解决此类问题

这里您可以做的是，将
showme
属性作为外部
ng repeat
元素的一部分。通过它，您将确保您依赖于参考
对象
，即
照片

您还必须将
ng repeat
移动到上面的一个步骤，以便
photo
对象在
internal
ng repeat
中可用，目前这两个
ng repeat
处于同一级别

标记

<div ng-controller="PhotosCtrl" class="content">
  <div class="photowrap" ng-repeat="photo in photos">
    <a href="" ng-click="photo.showme=true" class="photos">
      <img ng-src="{{photo.src}}" class="photo img-responsive"/>
    </a>
    <div ng-show="photo.showme" class="lightbox">
      <a href="" ng-repeat="large in larges" class="photos">
        <a ng-click="photo.showme=false" class="close">x</a>
        <img ng-src="{{large.src}}" class="lbphoto img-responsive"/>
      </a>
    </div>
  </div>
</div>

您的代码有两个问题：

1-
ng repeat
创建子作用域，因此必须使用
语法设置变量，并在以后使用它

2-您的
ng repeat
位于
a
标签上，因为您的
ng在下面的
div
中显示，这意味着照片在那里不可用。你必须将你的
ng repeat
提高一级

因此：


感谢您的回复-我应用了您的建议，但当我单击我的图像时仍然看不到任何内容。@FastSleep检查更新的答案，谢谢提醒
<div ng-controller="PhotosCtrl" class="content">
  <div class="photowrap" ng-repeat="photo in photos">
    <a href="" ng-click="photo.showme=true" class="photos">
      <img ng-src="{{photo.src}}" class="photo img-responsive"/>
    </a>
    <div ng-show="photo.showme" class="lightbox">
      <a href="" ng-repeat="large in larges" class="photos">
        <a ng-click="photo.showme=false" class="close">x</a>
        <img ng-src="{{large.src}}" class="lbphoto img-responsive"/>
      </a>
    </div>
  </div>
</div>