Coeus Coeus - 1 year ago 101
AngularJS Question

Angular: toggle image on ng-repeat

Im using ng-repeat to display all the data and I have images to be toggled, but I found that when I select on perticular image to toggle all the images present in table toggles

I know index can be used but not sure how to implement it


<tr ng-repeat="val in values">
<td ng-bind="$index"></td>
<td ng-bind="val.rec">ED1500322</td>
<td><img ng-src="{{firstimage}}" height="22" width="22" ng-click="playStart($index)"></td>
<td ng-bind="val.result">I am going to School</td>
<div class="radio">
<input ng-model="val.iscorrect" value="yes" type="radio">
<label for="opt1">yes</label>
<input ng-model="val.iscorrect" value="no" type="radio">
<label for="opt10">no</label>


I would really appreciate if only the selected image toggles

Thanks in advance

Answer Source

If only one item can be played at any time, as I assume, the easiest would be to store in your scope the index of that item.

Then you just need to check from the HTML if the $index of any item is equal to the stored one to know which image to display.

Here is a plunkr with one possible solution: