CODEWITHSUNDEEP
angularjsimage
bleyk
bleyk

Reputation: 799

changing an image into another image and then resets back to default image when another different image is clicked in angularjs

How will I change my image and the roll it back to default image when I click another image using angularjs? I am new to angular and here is my code

    <div ng-controller="SwapControl">

    <img  ng-click="myData.swapHere()" ng-src="{{myData.images.current}}"  alt="image to be swapped">
  </div>
  <script>
  var myApp = angular.module("swap", []);

myApp.controller('SwapControl', function($scope) {
  $scope.myData = {};

  $scope.myData.images = {

    initialImage: "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif",
    finalImage: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1247787",
    current : "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif"
  };
  $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
      };


  $scope.myData1 = {};

  $scope.myData1.images = {
    initialImage: "http://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg",
    finalImage: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1247787",
    current : "http://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg"
  };
  $scope.myData1.swapHere = function() {
       if($scope.myData1.images.current === $scope.myData1.images.finalImage)
          $scope.myData1.images.current = $scope.myData1.images.initialImage
        else if($scope.myData1.images.current === $scope.myData1.images.initialImage) 
          $scope.myData1.images.current = $scope.myData1.images.finalImage
      };


});

</script>
 <div ng-controller="SwapControl">

    <img ng-click="myData1.swapHere()" ng-src="{{myData1.images.current}}"  alt="image to be swapped">
  </div>

</body>

here is the plunker link: http://plnkr.co/edit/zPxqPjB4M1sis16SF7Jn?p=preview

Upvotes: 1

Views: 465

Answers (1)

Egan Wolf
Egan Wolf

Reputation: 3573

First of all, your images are controlled by two diffrent instances of the same controller. Then, every image is in diffrent scope so first image can't be controlled by the second one. To change this, move your ng-controller attribute to <body> element.

Now you can change ng-click attribute for second image and use the function that changes first image. Below is a working code:

<body ng-app="swap" ng-cpontroller="SwapControl">
    <div>
        <img  ng-click="myData.swapHere()" ng-src="{{myData.images.current}}" alt="image to be swapped">
    </div>
<script>
var myApp = angular.module("swap", []);

myApp.controller('SwapControl', function($scope) {
  $scope.myData = {};

  $scope.myData.images = {
    initialImage: "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif",
    finalImage: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1247787",
    current : "http://creativecurio.com/wp-content/uploads/2007/vm-logo-sm-1.gif"
  };
  $scope.myData.swapHere = function() {
       $scope.myData1.images.current = $scope.myData1.images.initialImage
       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
      };


  $scope.myData1 = {};

  $scope.myData1.images = {
    initialImage: "http://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg",
    finalImage: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1247787",
    current : "http://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg"
  };

  $scope.myData1.swapHere = function() {
       $scope.myData.images.current = $scope.myData.images.initialImage
       if($scope.myData1.images.current === $scope.myData1.images.finalImage)
          $scope.myData1.images.current = $scope.myData1.images.initialImage
       else if($scope.myData1.images.current === $scope.myData1.images.initialImage) 
          $scope.myData1.images.current = $scope.myData1.images.finalImage
      };
});
</script>

    <div>
        <img ng-click="myData1.swapHere()" ng-src="{{myData1.images.current}}"  alt="image to be swapped">
    </div>

</body>

Upvotes: 1

Related Questions