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

Question

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

我读到每个 <li> 都创建了自己的范围。所以我尝试根据 "comments" link.

的点击创建局部变量和 show/hide 评论列表

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

不过，您可能希望切换每本书的评论。所以你可以这样做..

控制器

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 中不起作用

ng-click doesn't work in ng-repeat inside scope

angularjs

angularjs-ng-repeat

angularjs-ng-click