AngularJS - 別の画像の上に画像を表示

私のコードが乱雑であれば申し訳ありません。 Ionic AngularJSの別の画像の上に画像を表示しようとしています。基本的に、ユーザーが "適用"ボタンをクリックすると、画像 "toilet.png"が画像 "PathFindingMap.png"の上に表示されます。私navigation.htmlでAngularJS - 別の画像の上に画像を表示

、私は次のコードスニペットがあります。私のcontroller.jsで

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

を、私は次のコードスニペットがあります。私のservicesjsで

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

を私は持っています以下のコードスニペット：

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

     } 
    } 
    })

残念ながら、「トイレ.png」画像は常に「パット"toilet.png"のX座標とY座標にかかわらず、 "hFindingMap.png"となります。私は多くのことを試しましたが、 "PathFindingMap.png"の上に "toilet.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 - 別の画像の上に画像を表示

答えて

関連する問題