使用 angularjs 交换图像标签中的 ng-src 属性答案

【问题标题】：swap ng-src attributes in image tag using angularjs使用 angularjs 交换图像标签中的 ng-src 属性
【发布时间】：2015-04-08 21:17:07
【问题描述】：

我用jQuery交换了两张图片的来源，这样当你点击一张图片时，它的src将与另一张作为数据属性添加的图片交换，从而导致图片发生变化。我不想使用 angularjs 来达到同样的效果。我没有严格的议程，它应该使用 src 交换技术本身来在 angularjs 中实现相同的目的。任何简单且有效的东西都可以。这是我现有的代码。

jQuery

    $(".side-nav li:nth-child(2)").append("<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png'>");
    $("#arrowRotate").click(function() {
        var _this = $(this);
        var current = _this.attr("src");
        var swap = _this.attr("data-swap");
        _this.attr('src', swap).attr("data-swap", current);
        //toggle li's below
        $(".side-nav li:nth-child(3)").toggle();
        $(".side-nav li:nth-child(4)").toggle();
        $(".side_nav_custom li:nth-child(2) a").toggleClass("orangeSwap");
    });

切换部分很容易实现，我已经用 angular (see fiddle) 实现了它。唯一让我烦恼的是 src 交换部分。我已经设置了一个 plunker here.

角度

index.html

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="swap">
  <div ng-controller="SwapControl">
    <h1>Hello {{myData.names.nameTwo}}!</h1>
    <img ng-click="myData.swapHere()" ng-src="{{myData.images.initialImage}}" alt="image to be swapped">
  </div>
</body>

</html>

script.js

// Code goes here

var myApp = angular.module("swap", []);

myApp.controller('SwapControl', function($scope) {
  $scope.myData = {};
  $scope.myData.names = {
    nameOne: "Plunker",
    nameTwo: "Thomas"
  };
  $scope.myData.images = {
    initialImage: "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif",
    finalImage: "http://www.omniaceducation.com/Portals/11164/images/small-logo.jpg"
  };
  $scope.myData.swapHere = function() {
    // swaping takes place here
  };
});

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

向myData.images再添加一个变量

$scope.myData.images = {
    initialImage: "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif",
    finalImage: "http://www.omniaceducation.com/Portals/11164/images/small-logo.jpg",
    current : "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif"
  };

你可以放 ng-src="{{myData.images.initialImage}}" 为 ng-src="{{myData.images.current}}" 然后在您的交换功能中。

    $scope.myData.swapHere = function() {
        if($scope.myData.images.current === $scope.myData.images.finalImage)
          $scope.myData.images.current = $scope.myData.images.initialImage
        else if($scope.myData.images.current === $scope.myData.images.initialImage) 
          $scope.myData.images.current = $scope.myData.images.finalImage
      };

【讨论】：

..如果我再次点击它？它会切换回之前的状态吗？
非常感谢。如果您碰巧找到更好的方法，请在此处更新。