AngularJS - Bild über einem anderen Bild anzeigen

Es tut mir leid, wenn meine Codes unordentlich sind. Ich versuche, ein Bild auf einem anderen Bild in Ionic AngularJS anzuzeigen. Wenn der Benutzer auf die Schaltfläche "Anwenden" klickt, wird im Grunde das Bild "toilette.png" oben auf dem Bild "PathFindingMap.png" angezeigt.AngularJS - Bild über einem anderen Bild anzeigen

In meinem navigation.html, ich habe den folgenden Code-Schnipsel:

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

In meinem controller.js, ich habe den folgenden Code-Schnipsel:

.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",  
     } 
    } 
} 
})

In meinem servicesjs habe ich die folgender Code-Schnipsel:

.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; 
      } 

     } 
    } 
    })

Leider ist das "toilet.png" Bild immer unter der „Pat anzuzeigen hFindingMap.png ", unabhängig von den X- und Y-Koordinaten der" toilette.png ". Ich habe viele Dinge ausprobiert, aber ich konnte die "toilette.png" nicht oben auf der "PathFindingMap.png" anzeigen. Es scheint, dass etwas mit meinem Code nicht stimmt. Kann mir jemand sagen, wie es funktioniert? Vielen Dank!

Quelle

2017-01-06 Antoni

Haben Sie versucht, den Z-Index zu ändern? –

fügen div oben hinzu und binden Bild dynamisch mit ng-show/ng-hide –

Können Sie eine jsfiddle mit Ihrem Code hinzufügen? – Geeky

Sie können es mit Hilfe von CSS tun. Um ein Bild über einem anderen Bild auf Knopfdruck hinzuzufügen, können Sie das ng-class-Attribut verwenden.

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>

Quelle

2017-01-08 04:46:35

Was sind imageOnTop und imageOnBottom? Ich bin verwirrt – Antoni

und ich kann nicht das Code-Snippet, das Sie mir – Antoni

ImageOnTop und ImageOnBottom sind Stil Klassenname ausführen –

AngularJS - Bild über einem anderen Bild anzeigen

Antwort

Verwandte Themen