Question

我想在带有按钮的项目中隐藏带有值的div，怎么做

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

我们在Item对象中使用动态rendered属性（不存在，但在ng-repeat中创建并初始化它：

false值，以便第一次隐藏它。

或

true值，以便第一次显示。

但默认使用false

Answer 2

使用ngShow，并在每个ngClick更改项目的属性（例如示例中的item.show）。

＆＃13;

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

＆＃13;

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

＆＃13;

在ng-repeat中隐藏此div

2 个答案: