Question

我读到了它，但我仍然无法使其发挥作用。我有一个图像（空心），我想改变成一个不同的图像（全心），以表明它已被添加到愿望清单。

这是我的代码：

 <tbody class="mainImgs">
     <div ng-repeat="party in showtop5" ng-class=party.name>
       <img ng-src="{{party.image}}">
       <h2 id="title">{{party.title}}</h2>
       <h3 id="description">{{party.description}}</h2>
       <button href="#" class="imageClick" ng-click="click(party.title, party.description, party.image)">
         <img ng-src="../images/emptyHeart.png" id="heart" click="myFunction(party.name, imageClick)">
       </button>
       <img ng-src="{{party.img}}" id="pace">
     </div>
 </tbody>

和我的剧本：

   function myFunction(myclass1, myclass2){
        document.getElementByClass(myclass1).getElementByClass(myclass2).getElementById("heart").src = "../images/fullHeart.png";
     }

我做错了什么？没有发送类 - 并且只尝试通过id找到图像 - 只适用于打印的第一个对象心脏

Answer 1

我认为如果它只是改变图像，那么它可以非常直接地处理：

在html中

<button href="#" class="imageClick" ng-click="click(party.title, party.description, party.image)">
   <img ng-src="{{imgPath}}" id="heart" ng-click="myFunction(party.name, imageClick)">
</button>

在控制器中：

$scope.imgPath = "../images/emptyHeart.png";
$scope.myFunction= function (name,imageClick){
   // use promise to monitor the server response of adding product to Wishlist
  ("YOUR_PROMISE_CALL").then(
     function(success){
        $scope.imgPath = "../images/fullHeart.png";   // Bingo !!
     },
    function(error){
        // take appropriate action
     },
  )
}

在id中的类中更改img

1 个答案: