I'm making a web map using angularjs. I'm using ng-repeat and a function in order to load the icon location from a json string. The printer icons are positioned by inline css from the app.js file.
My Problem: My the angularjs is correctly working but my css positioning isn't. The printer icons end up on the bottom instead where they are supose to be positioned. What can I do to fix my problem.
Run the snippet to check my code.
var app = angular.module('PrinterMap', [])
.controller('pMap', function($scope) {
var json = {
"printers": [{
"id": 1,
"netoworkPrinterName": "Printer1",
"location_X": 30,
"location_Y": 200,
"roomLocation": "Jesse'sCubical"
}, {
"id": 2,
"netoworkPrinterName": "Printer2",
"location_X": 56,
"location_Y": 18,
"roomLocation": "Fam'sCubical"
}, {
"id": 3,
"netoworkPrinterName": "Printer3",
"location_X": 52,
"location_Y": 23,
"roomLocation": "Ed'sCubical"
}, {
"id": 4,
"netoworkPrinterName": "Printer4",
"location_X": 22,
"location_Y": 42,
"roomLocation": "Jono's Cubical"
}, {
"id": 5,
"netoworkPrinterName": "Printer4",
"location_X": 80,
"location_Y": 80,
"roomLocation": "Jono's Cubical"
}, {
"id": 4,
"netoworkPrinterName": "Printer4",
"location_X": 82,
"location_Y": 92.5,
"roomLocation": "Jono's Cubical"
},
]
};
$scope.ocw = json
$scope.xandy = function(x, y) {
return {
width: 10 + 'px',
height: 10 + 'px',
position: 'relative',
left: x + '%',
top: y + '%'
};
};
});
/* CSS for map */
.northEastPod {
position: relative;
top: 150px;
left: 150px;
width: 10%;
height: 10%;
}
#printerIcon {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
}
.position {
background-image: url('http://ift.tt/1QGydAH');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
margin: 50px 20px 0;
}
.mapOuter {
position: relative;
width: 100%;
padding-top: 70%;
}
.MapImage .mapOuter {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
outline: 1px solid grey;
}
.MapImage {
width: 100%;
height: 100%;
}
.MapFix {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body ng-app="PrinterMap">
<div class="position">
<div class="mapOuter">
<div class="mapInner">
<div class="MapImage" ng-controller="pMap">
<img ng-repeat="location in ocw.printers" ng-src="http://ift.tt/1QGyfs2" ng-style="xandy({{ location.location_X }}, {{ location.location_Y }})" data-toggle="modal" data-target="#basicModal" data-content="Popup with option trigger"
data-container="body" rel="popover" data-placement="bottom" data-original-title="Title" />
</div>
</div>
</div>
</div>
<script src="http://ift.tt/1EbO5VO"></script>
</body>
Aucun commentaire:
Enregistrer un commentaire