AngularJS- How to handle each button created by ng-repeat

Question

I am new to AngularJS. I have created <li> to which I used ng-repeat.

<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.

I have made function which will replace empty like button to filled like button (By changing background image of button). But problem is this trigger applies to only first like button and other buttons does not change.

How can I fix this?

Code: HTML:

<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
     <label class="usrlabel">Username</label>
       <div class="imagedb">
         <input type="hidden" value="{{media.id}}">
         <img ng-src="{{ media.imgurl }}" alt="Your photos"/>
        </div>
        <!-- <br><hr width="50%"> -->
         <div class="desc">
          <p>{{media.alt}}</p>
           <input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
           <input type="button" class="commentbutton"/>
           <input type="button" class="sharebutton"/>
          </div>
        </div>  <br>
   </li><br><br><br>

</ul>
</body>
</html>

JS:

$scope.like = function(imgid)
    {
        document.
        getElementById("likeb").
        style.backgroundImage = "url(src/assets/like-filled.png)";
        alert(imgid);
    }

$scope.dislike = function(imgid)
{
    document.
    getElementById("likeb").
    style.backgroundImage = "url(src/assets/like-empty.png)";
}

Thanks for help & suggestions :)

Possible duplicate of [How to set dynamic id(\*ngFor) in ionic2/angular2?](https://stackoverflow.com/questions/34568497/how-to-set-dynamic-idngfor-in-ionic2-angular2) — Sami Kuhmonen, Aug 06 '17 at 19:47

score 1 · Accepted Answer · answered Aug 07 '17 at 19:01

The id for each button should be unique but in your case, it's the same for all buttons ('likeb'). You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:

<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>

Then in your controller, you can use the functions with the passed value. For example,

$scope.like = function(index)
    {
        document.
        getElementById(index).
        style.backgroundImage = "url(src/assets/like-filled.png)";
    }

Another good alternative in your case would be to use the directive ngClass.

score 0 · Answer 2 · answered Aug 06 '17 at 19:51

use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.

AngularJS- How to handle each button created by ng-repeat

2 Answers2