avinashadluri
10/28/2016 - 9:16 AM

2.Angular - Image swap with nr-src

2.Angular - Image swap with nr-src

2.Image Swap
content_copyfile_download
<!DOCTYPE html>
<html ng-app="swapApp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Swap</title>
    <script src="angular.js"></script>
    <!-- @author avinash -->
    <!-- @task Image Swapping -->
  </head>
  <body>
      <div ng-controller="swapCtrl"> 
        <img ng-src="{{image1}}" width="500" alt="1">
        <button ng-click="swap()"><></button>
        <img ng-src="{{image2}}"  width="500" alt="2">
      </div>
      <script type="text/javascript">
          angular
            .module("swapApp",[])
            .controller('swapCtrl', ['$scope', function ($scope) {
                  $scope.image1 = "image1.jpg";
                  $scope.image2 = "image2.jpg";
                  $scope.swap = function() {
                    $scope.temp = $scope.image1;
                    $scope.image1 = $scope.image2;
                    $scope.image2 = $scope.temp;
                  }
            }])
      </script>
  </body>
</html>