Question

我使用ng-repeat显示所有数据并且我有要切换的图像，但我发现当我选择在特定图像上切换表格切换中存在的所有图像时

我知道索引可以使用，但不知道如何实现它

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

如果只选择图像切换

，我将非常感激

提前致谢

Answer 1

如果我可以随时只播放一个项目，最简单的方法是在您的范围内存储该项目的index。

然后你只需要从HTML检查任何项目的$index是否等于存储的项目，以了解要显示的图像。

这是一个有一个可能解决方案的傻瓜：

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

Answer 2

一种可能的解决方案是给出一个＆＃34;状态＆＃34;每个项目，即：＆＃34;播放＆＃34;

然后，您可以制作：ng-src="val.playing ? 'pause.png' : 'play.png'" //val is the name you give in the iterator

最后，在click事件中，您可以直接传递您正在迭代的当前项目，即：playStart(val)

然后控制器方法将如下所示：

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

}

Answer 3

这是解决方案。与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

Answer 4

检查

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.8" 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>

你正在改变所有目标，你只需要点击一下

角度：在ng-repeat上切换图像

4 个答案: