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
– Volodymyr Babak, Commented Apr 1, 2016 at 20:20

Community · Accepted Answer · 2017-05-23 12:25:17Z

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!
@VolodymyrBabak do accept answer. and read up on another linked answer.. Thanks :)

Pankaj Parkar · Accepted Answer · 2016-04-01 21:16:20Z

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 1, 2016 at 21:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Apr 1, 2016 at 20:26

Fintan Kearney

7647 silver badges15 bronze badges

6 Comments

Pankaj Parkar Over a year ago

It appears that you haven't initialized the scope variable yet it would not work after intialization due to scoping issue..

Fintan Kearney Over a year ago

It would work but not for the purpose they were trying to achieve which is why I supplied the alternative approach.

Fintan Kearney Over a year ago

"You will probably want to toggle comments per book however."

Pankaj Parkar Over a year ago

could you remove 1st half of your answer, which is purely wrong.. if you do that so I can remove downvote..

Fintan Kearney Over a year ago

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

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Linked

Related