Question

我试图为某些图片制作一个超级简单的灯箱。基本上我有一个div使用ng-repeat显示一组图像，我想在点击其中一个图像时显示一个灯箱div。我无法弄清楚为什么我的灯箱div不会出现。这是我的代码：

＆＃13;

angular.module('myApp')
.controller('PhotosCtrl', ['$scope', function PhotosCtrl($scope){
	$scope.photos = [
		{
			src: '/images/img1.png',
			caption: ' '
		},
		{
			src: '/images/img2.png',
			caption: ' '
		}
	];
	$scope.larges = [
		{
			src: '/images/img1-lg.png',
			caption: ' '
		},
		{
			src: '/images/img2-lg.png',
			caption: ' '
		}
	];
}]);

＆＃13;

.photowrap{
	max-width: 85%;
	margin: 0 auto;
	padding: 12px 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	background-color: #fff;
}
.photos{
	margin: 0;
}
.photo{
	max-height: 250px;
	border: 2px solid #EBEBEB;
	border-radius: 5px;
}
p.caption{
	display: none;
}

.lightbox{
	max-width: 85%;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.6);
	position: absolute;
}
.lbphoto{
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: 0 auto;
}

＆＃13;

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

＆＃13;

任何人都可以帮我弄清楚我做错了吗？

谢谢！

Answer 1

因为在每次迭代时ng-repeat确实创建了一个原型继承的子范围。因此，在创建子范围时，object值与子范围内的引用一起传递，但原始类型值只是传递初始值。当原始类型值（此处showme）在子范围内被修改时，该变量在子范围内创建一个新副本（当ng-click内部ng-repeat时，showme的值为showme它将是objects）的新变量副本。您可以通过参考类型showme的帮助解决此类问题。

您可以在此处将ng-repeat属性作为photo元素的外部object的一部分。您将确保依赖photo ng-repeat作为参考{。}}。

此外，您必须将photo移至上一步，以便在inner 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>相同的水平。

<强>标记

radioButton.setChecked(true);

Answer 2

您的代码存在两个问题：

1- ng-repeat会创建一个子范围，因此您必须使用.语法来设置变量并在以后使用它。

2-您的ng-repeat位于a标记上，因为您ng-show位于div下面，这意味着该照片不可用。您必须将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>

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

2 个答案: