Javascript 角度：在ng repeat上切换图像_Javascript_Angularjs

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

javascript angularjs

Javascript 角度：在ng repeat上切换图像,javascript,angularjs,Javascript,Angularjs,我使用ng repeat显示所有数据，并且我有要切换的图像，但我发现，当我选择on Pertical image以切换表中显示的所有图像时，切换我知道可以使用索引，但不确定如何实现它 HTML ED1500322 我要去上学对不普朗克如果只切换选定的图像，我将非常感激提前感谢一个可能的解决方案是给每个项目一个“状态”，即：“播放” 然后，您可以使：ng src=“val.playing？”pause.png'：'play.png'//val是您在迭代器中给出的名称最后，在单击事

我使用ng repeat显示所有数据，并且我有要切换的图像，但我发现，当我选择on Pertical image以切换表中显示的所有图像时，切换

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

HTML


ED1500322
我要去上学
对
不

普朗克

如果只切换选定的图像，我将非常感激

提前感谢

一个可能的解决方案是给每个项目一个“状态”，即：“播放”

然后，您可以使：

ng src=“val.playing？”pause.png'：'play.png'

//val是您在迭代器中给出的名称

最后，在单击事件中，您可以直接传递正在迭代的当前项，即：

playStart（val）

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

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

}

如果在任何时候只能播放一个项目，我认为，最简单的方法是将该项目的

索引存储在您的范围内
然后，您只需要从HTML中检查任何项目的$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
        }
      }
    })

检查此项
<!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>


Sl号
记录ID
记录

音频文件
语音识别器

输出文本
100%正确

-是（1）/N（0）？
ED1500322
我要去上学
对
不
var ngApp=angular.module（'app'，[]）；
ngApp.controller（'ctrl'，函数（$scope）{
var暂停http://icons.iconarchive.com/icons/icons8/windows-8/512/Media-Controls-Pause-icon.png'
var播放http://pngimages.net/sites/default/files/play-png-image-54101.png'
$scope.values=[{
姓名：“约翰”，
记录：234，
iscorrect:'
}, {
姓名：“保罗”，
记录：44，
更正：“”
}, {
姓名：“乔治”，
记录：2664，
我是正确的：“不”
}, {
名称：“林戈”，
记录：124，
我是正确的：“是的”
}];
$scope.firstimage=play
$scope.playStart=函数（索引）{
var target=document.getElementsByClassName（“播放暂停”）[index]；
如果（target.src==播放）{
target.src=暂停
}否则{
target.src=播放
}
}
})

您正在更改所有目标，使用此选项，您只需单击一个目标这里有另一个可能的解决方案：@Coeus这里有一个工作示例
<!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>