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

Question

I try to create a list of books which may or may not contain comments. So I'd like to have ability to click on comments link (if it contains comments) and to see a list of comments.

I've read that each <li> creates its own scope. So I've tried to create local variable and show/hide comments list depending on click of "comments" link.

For some reason ng-click doesn't work and doesn't change "showComments" variables

I wrote small example to describe problem.

Any suggestions? Thanks.

 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>

code editor needs ui-bootstrap so here it doesn't work,but this is not related to the question — Volodymyr Babak, Apr 01 '16 at 20:20

score 1 · Accepted Answer · edited May 23 '17 at 12:25

showComment inside ng-repeat is different than the outer showComment variable. Because ng-repeat does create a child scope on each iteration, while rendering a DOM. That scope is always prototypically inherited from it parent scope. You could read about Prototypal inheritance in this answer.

Do have showComment property on each, as it will also make more sense to view individual book comment

Markup

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

Similar answer here

Great!It works perfectly now!I should read about prototypal inheritance a little bit more. Thanks a lot! — Volodymyr Babak, Apr 01 '16 at 20:30
@VolodymyrBabak do accept answer. and read up on another linked answer.. Thanks :) — Pankaj Parkar, Apr 01 '16 at 20:33

score 0 · Answer 2 · edited Apr 01 '16 at 21:16

0

You will probably want to toggle comments per book however. So you could do this..

Controller

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>

edited Apr 01 '16 at 21:16

Pankaj Parkar

134,766
23
234
299

answered Apr 01 '16 at 20:26

Fintan Kearney

743
7
15

*It appears that you haven't initialized the scope variable yet* it would not work after intialization due to scoping issue.. – Pankaj Parkar Apr 01 '16 at 20:29
It would work but not for the purpose they were trying to achieve which is why I supplied the alternative approach. – Fintan Kearney Apr 01 '16 at 20:32
"You will probably want to toggle comments per book however." – Fintan Kearney Apr 01 '16 at 20:36
could you remove 1st half of your answer, which is purely wrong.. if you do that so I can remove downvote.. – Pankaj Parkar Apr 01 '16 at 20:37
I understand your opinion but I believe my answer was sufficient. The first half of the answer is in response to "For some reason ng-click doesn't work and doesn't change "showComments" variables". – Fintan Kearney Apr 01 '16 at 20:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107995/discussion-between-pankaj-parkar-and-fintan-kearney). – Pankaj Parkar Apr 01 '16 at 20:40

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

2 Answers2