在 ng-repeat 循环中使用 ng-clikc 函数的 ng-show 和 ng-hide

Question

我是 angular JS 的新手。我不知道如何在 ng-repeat 循环中使用 ng-show 和 ng-hide 以及 ng-click 函数。这是我的代码：

<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 内容。但是我想在div中显示相同的内容显示和隐藏。如果有人可以帮助。

Answer 1

在我的示例中，您可以直接使用范围变量 show，而不是在 ng-click 上调用方法，并将其更改为 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

在 ng-repeat 循环中使用 ng-clikc 函数的 ng-show 和 ng-hide

ng-show and ng-hide with ng-clikc function in ng-repeat loop

angularjs

ng-repeat

ng-show

ng-hide