Question

如果我的代码很乱，我很抱歉。我试图在Ionic AngularJS中的另一个图像上显示图像。基本上，当用户点击＆＃34; apply＆＃34;按钮，它将显示图像＆＃34; toilet.png＆＃34;在图像的顶部＆＃34; PathFindingMap.png＆＃34;。

在我的navigation.html中，我有以下代码段：

    <button ng-click="apply()" type="button">Apply</button>
     <div style="width: 627px; height:975px; background-image: url('img/PathFindingMap.png'); background-repeat: no-repeat; background-size:cover;">

     </div>
     <div ng-style="navigationStyleToilet[$index]" ng-repeat="o in arr"></div>

在我的controller.js中，我有以下代码片段：

 .controller('NavigationCtrl', function ($scope, NavigationService) {
$scope.myCategory = {}
$scope.apply = function () {
    $scope.arr = [];
    var strCategoryName = "Washroom";
     categoryInfo = NavigationService.fnGetCategoryInfo(strCategoryName);
    $scope.navigationStyleToilet = [];
    for (i = 0; i < categoryInfo.length; i++)
    {
        $scope.arr.push(i);
        var targetImageX = categoryInfo[i].X;
        var targetImageY = categoryInfo[i].Y;
        $scope.navigationStyleToilet[i] = {
            "z-index":"1",
            "position":"absolute",
            "width": "100px",
            "height": "100px",
            "top": targetImageY,
            "left":targetImageX,
            "background": "url('img/toilet.png')",
            "background-repeat": "no-repeat",     
      }
    }
}
})

在我的servicesjs中，我有以下代码片段：

 .factory('NavigationService', function () {
 var ToiletCoordinates = new Array();
ToiletCoordinates[0] = { X: 16, Y: 100 };
 return {
        fnGetCategoryInfo: function (strCategoryName) {
            if (strCategoryName == "All Booth") {

            }
            else if (strCategoryName == "Washroom") {
                return ToiletCoordinates;
            }

        }
    }
  })

不幸的是，＆＃34; toilet.png＆＃34;无论＆＃34; toilet.png＆＃34;的X和Y坐标如何，图像始终显示在＆＃34; PathFindingMap.png＆＃34;下方。我尝试了很多东西，但我仍然无法制作＆＃34; toilet.png＆＃34;显示在＆＃34; PathFindingMap.png＆＃34;之上。我的代码似乎有问题。谁能告诉我一种让它工作的方法？谢谢！

Answer 1

你可以在CSS的帮助下完成。要在按钮单击时在另一个图像的顶部添加图像，可以使用ng-class属性。

＆＃13;

var app = angular.module("ap", []);
app.controller("con", function($scope) {
  $scope.class = "imgagOnBottom";
  $scope.changeClass = function() {
    if ($scope.class === "imageOnBottom") $scope.class = "imageOnTop";
    else $scope.class = "imageOnBottom";
  };
});

＆＃13;

.container {
  position: relative;
}
.imageOnTop {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.imageOnBottom {
  /*whatever css you want.*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="ap" ng-controller="con">
  <div class="container" style="background-image:'PathFindingImage.png';">
        <img ng-class="class" / src="toliet.png">
  </div>
  <button ng-click="changeClass()">Change Class</button>
</body>

＆＃13;

AngularJS - 在另一个图像上显示图像

1 个答案: