将这个div隐藏在ng-repeat中

Question

I would like hide a div with values inside from an item with a button, how to do this

 <div ng-repeat="item in items"> <p>{{item.name}}</p> <div>{{item.comment}}</div> <div id="button">show comment</div> </div> 

Answer 1

<div ng-repeat="item in items">
    <p>{{item.name}}</p>
    <div ng-show="item.rendered">{{item.comment}}</div>
    <div ng-hide="item.rendered" ng-click="item.rendered = true">show comment</div>
    <div ng-show="item.rendered" ng-click="item.rendered = false">hide comment</div>
</div>

We make use of on-the-fly rendered attribute in your Item object (does not exist, but created within the ng-repeat and initialize it:

• with false value to hide it for the first time.

or

• with true value to show it for the first time.

But default it uses false

Answer 2

Use ngShow and, at every ngClick , change an attribute(like item.show in the example) of your item.

 var app = angular.module('myApp', []); app.controller('myController', ['$scope', function($scope){ $scope.items = [{name:'name01', comment:'comment01'}, {name:'name02', comment:'comment02'}]; }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myController"> <div ng-repeat="item in items" > <p>{{item.name}}</p> <div ng-show="item.show">{{item.comment}}</div> <div id="button" ng-click="item.show = !item.show;">show comment</div> </div> </div>