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

Question

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

我读到每个<li> 都会创建自己的范围。因此，我尝试根据单击“cmets”链接创建局部变量并显示/隐藏 cmets 列表。

由于某种原因，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

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

每个都必须有showComment 属性，因为查看单个书籍评论也更有意义

标记

<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="book.showComments= !book.showComments">
           Comments
        </a>
      </div>
      <div ng-show="book.showComments">
        <ul>
          <li ng-repeat="comment in book.Comments">
            {{comment}}
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

类似answer here

Answer 2

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

控制器

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>