Question

在下面的html中，我试图显示一个由8个单元格组成的表格每个单元格显示一个图像，在图像上单击它调用changeImage函数，它获取图像ID并更改图像。

＆＃13;

//But its changing only one cell's image.When i click on image of any cell in table only first cell's image is changing.I know it is because of  id="myImage" declared in img tag.I'm trying to generate Seperate Id for each image but unable to do so.
function changeImage() {
  var image = document.getElementById('myImage');
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="bottom">
  <table id="t01" ng-if="Obj.Element">
    <tr>
      <th>hello</th>
      <th ng-repeat=" ElementObj in Obj.Element"> {{ElementObj.a.b}}</th </tr>
      <tr>
        <div class="tooltip">
          <th>{{Obj.c}}</th>
          <span class="tooltiptext">{{Obj.d}}</span>
        </div>

        <th ng-repeat="  ElementObj in Obj.Element">
          <div>
            <img id="myImage"  ng-click="changeImage()" src="pic_bulboff.gif" width="100" height="180">

          </div>
        </th>
      </tr>
  </table>
</div>

＆＃13;

目标：当我点击表格的单个单元格时，它应该更改图像。我试图显示一个由8个单元格组成的表格。每个单元格显示一个图像，点击图像，调用changeImage函数获取图像ID并更改图像。

Answer 1

您无需src或id来处理更改图片，因为您已经拥有了模型而您可以更改模型而不是元素。

默认我们将src设置为ng-init，然后我们在控制器中更改它，如下例所示：

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {

  $scope.elements = [{
      title: "A"
    },
    {
      title: "B"
    }
  ]

  $scope.changeImage = function(element) {
    var a = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQizZdER3przCQLcVB5b66j02wFyNRXxYIoYXIjqyntm2tpjIRA";
    var b = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
    element.src = element.srcType ? a : b;
    element.srcType = !element.srcType;
  }
})

img {
  width: 200px
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div ng-app="app" ng-controller="ctrl">
  <table class="table table-bordered">
    <thead>
      <th ng-repeat="element in elements"> {{element.title}}</th>
    </thead>
    <tbody>
      <tr>
        <td ng-repeat="element in elements">
          <div ng-init="element.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';element.srcType=true">
            <img ng-click="changeImage(element)" ng-src="{{element.src}}">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

首先你需要为图像传递动态id，所以在传递之后在id属性中打印$ index值作为函数中的参数，可以帮助您更改当前图像的图像。

    <img id="myImage"  onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">

function changeImage (e) {
  e.src = "PASS YOUR IMAGE PATH";
}

Answer 3

您不能对一组元素使用相同的id，因为该ID在页面中应该是唯一的。

我建议您使用event属性，因为它已包含您单击的目标元素：

<th ng-repeat="ElementObj in Obj.Element">
    <div>
        <img id="myImage" ng-click="changeImage($event)" src="pic_bulboff.gif" width="100" height="180">

    </div>
</th>

然后在你的JS中：

function changeImage(event) {
    var image = event.target;
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}

参考：https://docs.angularjs.org/guide/expression#-event-

Answer 4

<th ng-repeat="  ElementObj in Obj.Element">
          <div>
            <img id="myImage{{$index}}"  ng-click="changeImage('myImage' + $index)" src="pic_bulboff.gif" width="100" height="180">

          </div>
        </th>

如何获取ng-repeat中生成的每个图像的id？

4 个答案: