AngularJS-在另一個圖像上方顯示圖像

Question

對不起，我的代碼很亂。 我正在嘗試在Ionic AngularJS的另一個圖像上顯示圖像。 基本上，當用戶單擊“應用”按鈕時，它將在圖像“ PathFindingMap.png”的頂部顯示圖像“ toilet.png”。

在我的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;
            }

        }
    }
  })

不幸的是，無論“ toilet.png”的X和Y坐標如何，“ toilet.png”圖像始終顯示在“ PathFindingMap.png”下方。 我已經嘗試了很多方法，但是仍然無法在“ PathFindingMap.png”頂部顯示“ toilet.png”。 我的代碼似乎有問題。 誰能告訴我一種使其運作的方法？ 謝謝！

Answer 1

您可以在CSS的幫助下完成此操作。 要在單擊按鈕時將圖像添加到另一圖像的頂部，可以使用ng-class屬性。

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

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

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

AngularJS-在另一個圖像上方顯示圖像

問題描述

1 個解決方案

解決方案1
1 2017-01-08 04:46:35

AngularJS-在另一個圖像上方顯示圖像

問題描述

1 個解決方案

解決方案1 1 2017-01-08 04:46:35

解決方案1
1 2017-01-08 04:46:35