ng-show и ng-hide с функцией ng-clikc в петле ng-repeat

Question

Я новичок в угловой JS. Я не знал, как использовать ng-show и ng-hide с функцией ng-click в цикле ng-repeat. Вот мой код:

<div ng-repeat="listname in get_checklist track by $index"> 
    <span ng-click="CKItemShowHide()"> Add Item </span> 
    <div ng-show ="CKItemIsVisible" ng-cloak class="labelBoardpopup memberBoardpopup" layout="row" layout-wrap> 
     <h3>Create Item</h3> 
     <div class="createBoardpopupform" layout="row"> 
     <form flex> 
      <md-input-container class="md-block" flex-gt-sm> 
       <label>Item name</label> 
       <input ng-model="CKItem" ng-required="true"> 
      </md-input-container> 
      <md-button class="md-raised md-primary">Add</md-button> 
     </form> 
     </div> 
    </div> 
</div> 

В контроллере у меня есть такой код:

$scope.CKItemIsVisible = false; 
    $scope.CKItemShowHide = function() { 
     $scope.CKItemIsVisible = $scope.CKItemIsVisible ? false : true; 
    }; 

В этом коде, когда я нажимаю добавить элемент будет показывать и скрывать все содержимое Div в то же время. Но я хочу показать индивидуальное содержание шоу и скрыть. Если кто-то может помочь.

Answer 1

Вместо вызова метода ng-click, вы можете напрямую взять сферу переменной show в моем примере, и изменить его на true или false использованием !show

Поскольку ng-repeat создает new scope on every iteration, шоу переменная области всегда local to the current iteration.

Пожалуйста, проверьте этот код,

var myApp = angular.module('myApp',[]); 
 

 
function MyCtrl($scope) { 
 
    $scope.get_checklist = [ 
 
     { 
 
      test: "test" 
 
     }, 
 
     { 
 
      test: "test" 
 
     }, 
 
     { 
 
      test: "test" 
 
     } 
 
     ]; 
 
     
 
     
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="MyCtrl" ng-app="myApp"> 
 
    <div ng-repeat="listname in get_checklist"> 
 
    <span ng-click="show = !show"> Add Item </span> 
 
    <div ng-show ="show" ng-cloak class="labelBoardpopup memberBoardpopup" layout="row" layout-wrap> 
 
     <h3>Create Item</h3> 
 
     <div class="createBoardpopupform" layout="row"> 
 
     <form flex> 
 
      <md-input-container class="md-block" flex-gt-sm> 
 
       <label>Item name</label> 
 
       <input ng-model="CKItem" ng-required="true"> 
 
      </md-input-container> 
 
      <md-button class="md-raised md-primary">Add</md-button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
</div>

Пожалуйста, запустите этот фрагмент

Here is the fiddle