AngularJS - Показать изображение поверх другого изображения

Прошу прощения, если мои коды грязные. Я пытаюсь отобразить изображение поверх другого изображения в Ionic AngularJS. В основном, когда пользователь нажимает кнопку «применить», он отображает изображение «toilet.png» поверх изображения «PathFindingMap.png».AngularJS - Показать изображение поверх другого изображения

В моей 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" всегда отображается под "Pat hFindingMap.png ", независимо от координат X и Y для" toilet.png ". Я пробовал много вещей, но я все еще не мог сделать «toilet.png», отображаемый поверх «PathFindingMap.png». Кажется, что-то не так с моим кодом. Может ли кто-нибудь сказать мне способ заставить его работать? Благодаря!

источник

2017-01-06 Antoni

Вы пробовали изменения Z-индекс? –

добавить div сверху и связать изображение динамически с помощью ng-show/ng-hide –

Можете ли вы добавить jsfiddle с кодом? – Geeky

Вы можете сделать это с помощью 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>

источник

2017-01-08 04:46:35

Что такое imageOnTop и imageOnBottom? Я запутался – Antoni

, и я не могу запустить фрагмент кода, который вы мне дали – Antoni

imageOnTop и imageOnBottom - это имя класса стиля –

AngularJS - Показать изображение поверх другого изображения

ответ

Смежные вопросы