如何使用ng-repeat全屏查看图像？

Question

我期望像这样的https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img，但是在使用ng-repeat时似乎不起作用

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
 
    $scope.register = {
      regData: {
        branch: {},
      },
      names: [{
        name:"narquois",
        image:[
        "https://picsum.photos/200",
        "https://picsum.photos/200/300/"]
        
        }],
    };

  }]);

img{
width:70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
		
   
       <tr ng-repeat="person in register.names">
         <td align="center">{{ person.name }}</td>
         <td align="center"><img ng-repeat="image in person.image" ng-src="{{ image}}"></td>
       </tr>
   
</table> 
</div>

Answer 1

请运行以下代码。 我希望它能解决您的问题。

$easy as $easySingle

@foreach($easy as $easySingle)
    foreach ($easySingle->sbj_topics as $topic) {
      $topic->property;
    }   
@endforeach   

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {

    $scope.register = {
      regData: {
        branch: {},
      },
      names: [{
        name: "narquois",
        image: [{
          'image': "https://picsum.photos/200",
          'flag': false
        }, {
          'image': "https://picsum.photos/200/300/",
          'flag': false
        }]

      }],
    };
    $scope.getBig = function(key, value) {
      $scope.register.names[0].image[key].flag = true;
    }
    $scope.close = function(key, value) {
      $scope.register.names[0].image[key].flag = false;
    }
  }]);