1 pièce(s) jointe(s)
Afficher des données déjà présentes dans le json du navigateur
Bonjour,
Je fait des essais avec Angular-route pour aquérir de l'expérience.
Je reçois des données en json dans le navigateur mais je n'arrive pas à les afficher dans un tableau qui est inséré dans une page html par un ng-route. Vous pouvez voir la copie d'écran ci-dessous :
Pièce jointe 223941
J'ai essayé plusieur choses et voici le code que j'ai fait après plusieurs essais (j'ai même ajouté le ng-controller dans la balise TABLE alors que ce controller est normalement injecté par le fichier javascript :
fichier about.html qui est inséré dans acceuil.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div class="jumbotron text-center">
<h1>About Page</h1>
<table class="table table-striped" ng-controller="aboutController">
<thead>
<tr>
<th>titre</th>
<th>corps</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mess in messageBis">
<td>{{mess.titre}}</td>
<td>{{mess.corps}}</td>
<td>
<button class="btn btn-default"
ng-click="modifier_produit_conditionne(e)">Modifier</button>
<button class="btn btn-danger"
ng-click="supprimer_produit_conditionne()">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div> |
acceuil.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="UTF-8">
<title>Acceuil</title>
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/script.js"></script>
</head>
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular routing example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home </a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About </a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact </a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
</div>
</body>
</html> |
fichier javascript (je pense qu'il n'y a pas de problème de ce côté là puisque je peux voir le json dans le navigateur) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| /**
*
*/
var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'vues/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'vues/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'vues/contact.html',
controller : 'contactController'
});
});
scotchApp.controller('mainController', function($scope) {
console.log("main controller");
$scope.message = 'EveryOne come and see how good I look !';
});
scotchApp.controller('aboutController', function($scope, $http) {
$scope.messageBis = [];
$http.get('gestMessage').then(function(response) {
$scope.messageBis = response.data.message;
});
console.log("about controller");
});
scotchApp.controller('contactController', function($scope) {
console.log("contact controller");
$scope.message = 'Contact page';
}); |
