在ng-repeat循环中具有ng-clikc功能的ng-show和ng-hide

debugcn 发表于 Dev

萨兰

我是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内容。但是我想显示和隐藏个人内容。如果有人可以帮忙。

斯拉万

除了可以在上调用方法之外ng-click，您还可以直接show在我的示例中使用范围变量，然后将其更改为true或false使用!show

自ng-repeat创建以来new scope on every iteration，show scope变量始终为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>

请运行此代码段

这是小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。