Coeus Coeus - 6 months ago 51
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

HTML

<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>
<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>
</div>
</td>
</tr>


Plunker http://plnkr.co/edit/4A1JuStU0LFe35Pzrblv?p=preview

I would really appreciate if only the selected image toggles

Thanks in advance

Answer

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:

http://plnkr.co/edit/z7qwmjBqPZFROkIgqQTD?p=preview