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

时间:2016-11-05 09:14:56

标签: angularjs ng-repeat ng-show ng-hide

我是角度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内容。但我想展示个人内容展示和隐藏。如果有人可以请求帮助。

1 个答案:

答案 0 :(得分:0)

您可以直接在我的示例中使用范围变量 ng-click ,而不是在show上调用方法,并将其更改为true或{{ 1}}使用 false

由于!show创建了ng-repeat,因此show scope变量始终为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"
        }
        ];
        
        
}

请运行此代码段

Here is the fiddle