使用angularjs交換圖像標簽中的ng-src屬性

Question

我使用jQuery交換了兩個圖像的源，因此，當您單擊一個圖像時，它的src將與另一個圖像的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");
    });

實現切換部分很容易，我已經實現了有角度的功能（請參閱小提琴）。 唯一困擾我的是src交換部分。 我在這里設置了一個小矮人。

角

的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
  };
});

Answer 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
      };

使用angularjs交換圖像標簽中的ng-src屬性

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-09 07:37:00

使用angularjs交換圖像標簽中的ng-src屬性

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-09 07:37:00

解決方案1
1 已采納 2015-02-09 07:37:00