Bonjour, tout le monde :p
Voila je rencontre un petit problème avec mon code contenant du code AngularJs , Html, Css.
Ce que je fais
Voilà, pour un projet personnel j'ai créé une vue à partir d'un fichier Json.
Voici son rendu :
url = http://www.noelshack.com/2016-14-1460156379-types.png
Voici le code que j'ai écris en Html / AngularJs :
<body>
<div class="container">
<div class="row header" style="text-align:center;color:black">
<h3>List of Types.</h3>
</div>
<table class="table table-striped">
<tr>
<td><b>Id</b></td>
<td><b>Type</b></td>
<td><b>Weaknesses</b></td>
</tr>
<tr ng-repeat="type in types">
<td >{{type.id}}</td>
<td><svg title="{{type.name}}" ng-include="getLogos(type.id)"></svg></td>
<td><svg ng-repeat="weakness in type.weaknesses"
title="{{types[weakness].name}}"
ng-include="getLogos(weakness)"></svg></td>
</tr>
</table>
</div>
</body>
Et le code côté Js :
angular.module('myApp.tableOfTypes', ['ngRoute'])
.config(['$routeProvider' , function($routeProvider) {
$routeProvider.when('/tableOfTypes', {
templateUrl: 'tableOfTypes/tableOfTypes.html',
controller: 'typesController'
});
}])
.controller('typesController', [ '$scope','$http',
function($scope, $http) {
$http.get('resources/Types.json').success(function(data) {
$scope.types = data.Types;
});
$scope.getLogos = function ($weakness) {
var logo_path = 'resources/logo/' + $weakness +'_32x32.svg';
return logo_path;
}
}]);
Ce que je veux
Ce que j'aimerais obtenir c'est une mise en forme plus jolie .
J'essaye depuis une journée de réduire l'espace entre chaques images dans a colonne weaknesses, mais quoique je fasse rien ne fonctionne.
J'aimerais aussi , réduire l'espace entre chaques lignes, qui est presque égal à la hauteur du svg.
Voilà voilà,
Je vous remercie d'avance ! :)
Et encore merci de vos tutos !
Maraboutbout Gajovski