событие флажка часть ng-repeat, которая должна включать или отключать изображение или содержимое формы на основе ng-click

Question

Это экран галереи, где я отображаю изображения, созданные с помощью Json, с флажком и с помощью ng-repeat для набора тегов html в разделе div.Когда флажок установлен, изображение должно исчезнуть, и должно появиться некоторое содержимое, а когда флажок снят, оно переворачивается.Я использовал ng-show, и когда я попытался установить флажок, отображается все содержимое элемента, а не отображается только конкретный элемент. Как этого добиться, помогите

Перечислите изображения из json с помощью ng-repeatКогда флажок отмечен, содержимое, которое отключено, показывается под каждым изображением

<div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Generate Table"  ng-click="GenerateTable()" />
        <hr />

            <div ng-repeat="m in Customers" style="width:300px; height:200px; border:2px solid red; float:left; ">
            <!-- 
            <div style="width:100% height:20px"><input type="checkbox" ng-model="myController.checked" ng-click="invokeForm()"/></div>
             -->
                    <div style="width:100% height:20px">

                    <input type="checkbox" ng-click="myFunc($index)" /></div>
                    <div style="width:100%; height:inherit; position:absolute;  background-color:red; visibility:hidden;  ">something</div> 
                     <div style="width:100%; height:inherit; ;  background-color:#fcfcfc; z-index:-1; ">
                     <div style="width:100% height:">
                     <img  class="proimg" src="{{m.img}}" /> 


                   <div ng-show="showMe" id="{{$index}}" class="prodet"  >
                   <div style="width:100% height:20px">{{m.CustomerId}}</div>
                    <div style="width:100% height:20px">{{m.Name}}</div>
                    <div style="width:100% height:20px">{{m.Country}}</div>
                   </div>


                     </div>

                    </div>

            </div>     


    </div>

Код контроллера

var jsonAry = [
                { CustomerId: 1, Name: "Lakshmanan", Country: "United States", img:"products/ragi.png" },
                { CustomerId: 2, Name: "Mudassar Khan", Country: "India", img:"products/samai.png" },
                { CustomerId: 3, Name: "Suzanne Mathews", Country: "France", img:"products/thinai.png" },
                { CustomerId: 4, Name: "Robert Schidner", Country: "Russia", img:"products/varagu.png" },

               ];
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.IsVisible = false;
            $scope.GenerateTable = function () {
                $scope.Customers = jsonAry;
                $scope.IsVisible = true;
            };
            $scope.invokeFor = function(){
                alert("hi");
            };
            $scope.myFunc = function(index) {
                //alert(index);

                $scope.showMe = !$scope.showMe;
             };


});

Ожидается, что при нажатии флажка над изображением должно отображаться определенное содержимое, но тогда как оно показываетсодержимое всех изображений

Answer 1

$ scope.showMe не может работать так, как вы хотите.Вы можете добавить свойство в объект Customer, например, «IsVisible», а затем просто переключить это значение, как показано ниже:

<input type="checkbox" ng-click="m.IsVisible = !m.IsVisible" /></div>

и

<div ng-show="m.IsVisible" id="{{$index}}" class="prodet"  >