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

时间:2017-01-06 04:11:45

标签: javascript html css angularjs ionic-framework

如果我的代码很乱,我很抱歉。我试图在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;之上。我的代码似乎有问题。谁能告诉我一种让它工作的方法?谢谢!

1 个答案:

答案 0 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;