Question

当我使用angularjs单击另一个图像时，如何更改图像并将其回滚到默认图像？我是角度新手，这是我的代码

    <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>

这里是plunker链接：http://plnkr.co/edit/zPxqPjB4M1sis16SF7Jn?p=preview

Answer 1

首先，您的图像由同一控制器的两个不同实例控制。然后，每个图像都在不同的范围内，因此第一个图像不能由第二个图像控制。要更改此设置，请将<body>属性移至ng-click元素。

现在，您可以更改第二张图像的<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>属性，并使用更改第一张图像的功能。以下是工作代码：

{{1}}

将图像更改为另一个图像，然后在angularjs中单击另一个不同的图像时重置为默认图像

1 个答案: