Question

我尝试创建一个可能包含或不包含注释的书籍列表。所以我希望能够点击评论链接（如果它包含评论）并查看评论列表。

我读过每个<li>创建自己的范围。所以我试图创建局部变量并显示/隐藏评论列表，具体取决于点击“评论”链接。

由于某些原因，ng-click不起作用，并且不会更改“showComments”变量

我写了一个小例子来描述问题。

有什么建议吗？感谢。

 var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('bookCtrl', function($scope) {

   $scope.books=[
   	{Name:"Book1",Comments:["first comment book1,second comment book1"]},
    {Name:"Book2",Comments:["first comment book2,second comment book2"]},
    {Name:"Book3",Comments:[]}
   ];
});

html, body {
    width: 100%;
    height: 100%;
}

ul{
  list-style-type:none;
}

a:hover {
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="booksCtrl">
  <ul>
    <li ng-repeat="book in books">
      <div class="row">
        {{book.Name}}
      </div>
      <div>
        <a ng-if="book.Comments.length>0" ng-click="showComments = !showComments ">Comments</a>
      </div>
      <div ng-show="showComments">
        <ul>
          <li ng-repeat="comment in book.Comments">
            {{comment}}
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Answer 1

1 {}中的showComment与外部ng-repeat变量不同。因为showComment确实在每次迭代时创建子范围，所以在渲染DOM时。该范围始终从其父范围原型继承。你可以阅读Prototypal inheritance in this answer。

每个都有ng-repeat属性，因为查看单个书籍评论也更有意义

<强>标记

showComment

类似answer here

Answer 2

但是，您可能希望为每本书切换评论。所以你可以这样做..

<强>控制器

app.controller('bookCtrl', function($scope) {

   $scope.books=[
    {Name:"Book1",Comments:["first comment book1,second comment book1"], showComments: false},
    {Name:"Book2",Comments:["first comment book2,second comment book2"], showComments: false},
    {Name:"Book3",Comments:[], showComments: false}
   ];

<强> HTML

<a ng-if="book.Comments.length" ng-click="book.showComments= !book.showComments ">Comments</a>
..
<div ng-show="book.showComments">
   <ul>
       <li ng-repeat="comment in book.Comments">
          {{comment}}
       </li>
    </ul>
</div>

ng-click在ng-repeat内部范围内不起作用

2 个答案: