swap ng-src attributes in image tag using angularjs

Question

I used jQuery to swap the source of two images so that, when you click one image,it's src will be swapped with the other one added as a data attribute resulting in image change. I wan't to achieve the same using angularjs. I have no strict agenda that it should use src swapping technique itself to achieve the same in angularjs. Anything that is simple and works is fine. Here is my existing code.

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

It was easy to achieve the toggle part and I have implemented it in angular (see fiddle). Only thing that bugs me is the src swapping part. I have set up a plunker here.

Angular

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

Parv Sharma · Accepted Answer · 2015-02-09 07:53:38Z

1

add one more variable to 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"
  };

you can put ng-src="{{myData.images.initialImage}}" as ng-src="{{myData.images.current}}" and then inside your swap function.

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

edited Feb 9, 2015 at 7:53

answered Feb 9, 2015 at 7:37

Parv Sharma

12.7k5 gold badges52 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Sebastian Over a year ago

..and if I click it again? WIll it toggle back to the previous state?

Thomas Sebastian Over a year ago

Works great thanks. If you happen to find any better method , please update here.

Collectives™ on Stack Overflow

swap ng-src attributes in image tag using angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related