Angular: Почему мой div не показывает / скрывает с помощью ng-show/ng-hide?

Question

Я пытаюсь сделать супер простой лайтбокс для некоторых изображений. В основном у меня есть div с набором изображений, отображаемых с помощью ng-repeat, и я хочу, чтобы div лайтбокса отображался при нажатии на одно из изображений. Я не могу понять, почему мой лайтбокс div не появится. Вот мой код:

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: ' '
  }
 ];
}]);

.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;
}

<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>

Может кто-нибудь помочь мне понять, что я делаю не так?

Спасибо!

Answer 1

Потому что на каждой итерации ng-repeat действительно создает прототипно унаследованную дочернюю область. Таким образом, при создании дочерней области, object значение передается со ссылкой внутри дочерней области, но значения примитивного типа просто передают туда начальное значение. Когда примитивные типы значения (здесь showme) изменяется внутри дочерней области, эта переменная создает новую копию внутри дочерней области (когда ng-click внутреннего ng-repeat изменяет значение showme это будет новая переменная копия showme). Вы можете решить такую ​​проблему, воспользовавшись справочным типом objects,

Вот что вы можете сделать, это сделать showme собственность как часть внешнего ng-repeat который photo элемент. С помощью которого вы убедитесь, что вы полагаетесь на ссылку object который photo,

Также вы должны двигаться ng-repeat на один шаг выше, так что photo объект станет доступным внутри innerng-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>

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>