交换NG-src的图像标签使用angularjs

我以前jQuery交换两个图片的来源，这样，当你点击一个图像属性，它的SRC将与另一种被交换添加导致图像变化的数据属性。我不想用angularjs来实现。我没有严格的议程，它应该使用src交换技术本身来实现angularjs中的相同。任何简单的工作都很好。这是我现有的代码。交换NG-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"); 
    });

这是很容易实现肘节部和我在角（see fiddle）来实现它。唯一让我感到困扰的是src交换部分。我已成立了一个plunker here.

角

的index.html

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" 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 
    }; 
});

来源

2015-02-09 Thomas Sebastian

一个多变量添加到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 
     };

来源

2015-02-09 07:37:00

..和如果我再次点击它？它会切换回到以前的状态？ – 2015-02-09 07:40:34

编辑我的答案现在它会 – 2015-02-09 07:53:49

非常感谢。如果您碰巧找到了更好的方法，请在此更新。 – 2015-02-09 08:07:37

回答

相关问题