ng-show와 ng-hide는 ng-repeat 루프에서 작동합니다.

Question

저는 각도 JS에 익숙하지 않습니다. ng-repeat 루프에서 ng-click 기능을 사용하여 ng-show 및 ng-hide를 사용하는 방법을 알지 못했습니다. 내가이 표시됩니다 항목을 추가하고 동시에 모든 사업부의 내용을 숨기 클릭하면

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

이 코드에서 : 컨트롤러에서

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

내가 다음과 같은 코드를 가지고 : 여기 내 코드입니다. 하지만 나는 개별 콘텐츠를 보여주고 숨기려고합니다. 누구든지 도움을받을 수 있다면.

Answer 1

대신 ng-click에 메소드를 호출, 당신은 직접 쇼를 내 예에 show 변수 범위를 가지고 가고, ng-repeat 이후 !show

가 new scope on every iteration를 생성하여 true 또는 false으로 변경할 수 있습니다 범위 변수는 항상 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