Angular: toggle image on ng-repeat

Question

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

here's another possible solution: plnkr.co/edit/9AoJm6tZYkUIaWnbs5H7?p=preview — rob
– rob, Commented May 19, 2016 at 16:04

floribon · Accepted Answer · 2016-05-19 16:03:54Z

2

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

answered May 19, 2016 at 16:03

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

edrian · Accepted Answer · 2016-05-19 16:02:22Z

1

One possible solution is to give an "status" to each item, ie: "playing"

Then, you can make: ng-src="val.playing ? 'pause.png' : 'play.png'" //val is the name you give in the iterator

Finally, in the click event you can pass directly the current item you are iterating, ie: playStart(val)

And then the controller method will look like:

$scope.playStart = function(item) {
     item.playing = !item.playing; //Change current status

}

answered May 19, 2016 at 16:02

edrian

4,5315 gold badges34 silver badges35 bronze badges

1 Comment

edrian Over a year ago

@Coeus here you have a working example plnkr.co/edit/5lQlRYp1ju0DmjFaaV8b?p=preview

M. Junaid Salaat · Accepted Answer · 2016-05-19 16:06:12Z

Here is the solution. with index

var ngApp = angular.module('app', []);
    ngApp.controller('ctrl', function($scope) {
      var pause = 'http://icons.iconarchive.com/icons/icons8/windows-8/512/Media-Controls-Pause-icon.png'
      var play = 'http://pngimages.net/sites/default/files/play-png-image-54101.png'


      $scope.values = [{
        name: "John",
        rec: 234,
        iscorrect: '',
        status: play
      }, {
        name: "Paul",
        rec: 44,
        iscorrect: '',
        status: play
      }, {
        name: "George",
        rec: 2664,
        iscorrect: 'no',
        status: play
      }, {
        name: "Ringo",
        rec: 124,
        iscorrect: 'yes',
        status: play
      }];

      $scope.firstimage = play
      $scope.playStart = function(index) {
        if ($scope.values[index].status == play) {
          $scope.values[index].status = pause
        } else {
          $scope.values[index].status = play
        }
      }
    })

Demo

Víctor · Accepted Answer · 2016-05-19 16:10:25Z

Check this

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
  <table class="table table-bordered dashboard_table">
    <thead>
      <tr>
        <th>Sl No</th>
        <th>Recording ID</th>
        <th>Recording
          <br> Audio File</th>
        <th>Speech Recognizer
          <br> Output text</th>
        <th>100% Correct
          <br>- Y(1) / N(0)?</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="val in values">
        <td ng-bind="$index"></td>
        <td ng-bind="val.rec">ED1500322</td>
        <td><img class ="playPause"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>
    </tbody>
  </table>
  <script>
    var ngApp = angular.module('app', []);
    ngApp.controller('ctrl', function($scope) {
      var pause = 'http://icons.iconarchive.com/icons/icons8/windows-8/512/Media-Controls-Pause-icon.png'
      var play = 'http://pngimages.net/sites/default/files/play-png-image-54101.png'


      $scope.values = [{
        name: "John",
        rec: 234,
        iscorrect: ''
      }, {
        name: "Paul",
        rec: 44,
        iscorrect: ''
      }, {
        name: "George",
        rec: 2664,
        iscorrect: 'no'
      }, {
        name: "Ringo",
        rec: 124,
        iscorrect: 'yes'
      }];

      $scope.firstimage = play
      $scope.playStart = function(index) {
        var target = document.getElementsByClassName("playPause")[index];
        if (target.src == play) {
          target.src = pause
        } else {
          target.src = play
        }
      }
    })
  </script>
</body>

</html>

You were changing all the targets, with this you only go for the clicked one

Collectives™ on Stack Overflow

Angular: toggle image on ng-repeat

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related