在ng-repeat中隐藏此div

时间:2018-01-23 12:42:54

标签: javascript angularjs

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

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

2 个答案:

答案 0 :(得分:0)

<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

答案 1 :(得分:0)

使用ngShow,并在每个ngClick更改项目的属性(例如示例中的item.show)。

&#13;
&#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;
&#13;
&#13;