如果我的代码很乱,我很抱歉。我试图在Ionic AngularJS中的另一个图像上显示图像。基本上,当用户点击" apply"按钮,它将显示图像" toilet.png"在图像的顶部" PathFindingMap.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;
}
}
}
})
不幸的是,&#34; toilet.png&#34;无论&#34; toilet.png&#34;的X和Y坐标如何,图像始终显示在&#34; PathFindingMap.png&#34;下方。我尝试了很多东西,但我仍然无法制作&#34; toilet.png&#34;显示在&#34; PathFindingMap.png&#34;之上。我的代码似乎有问题。谁能告诉我一种让它工作的方法?谢谢!
答案 0 :(得分: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";
};
});
&#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;