Forum : Probleme avec ng-repeat ( AngularJS)

Bonjour ,

faisant quelques tests pour apprendre AngularJS je voudrais récupérer les données d'une base mysql et les affichers avec ng-repeat

j'ai donc créer un tableau json , j'ai fait une div caché qui contient le tableau ( c'est des news donc rien de sensible ) , et j'ai récuperer ce tableau avec un $.html en jquery

dans ma console quand je tape la variable tableau je récupère bien un truc de ce genre :

{"id":"1","category":"Jeux Vid\u00e9o","name":"Gran Theft Auto 5 Annonc\u00e9 "},
{"id":"2","category":"Jeux Vid\u00e9o","name":"R\u00e9sum\u00e9 de l'E3"},
{"id":"3","category":"Sport","name":"Victoire de Tony Martin sur l'\u00e9tape 10 de la Vuelta"},
{"id":"4","category":"Sport","name":"US Open : Monfils en Quart "},
{"id":"5","category":"Graphisme","name":"Nouveaut\u00e9 PHotoshop CC "}]
etc...

Donc ce côté ci ça a l'air bon .

J'ai crée un controller news avec angular mais je n'arrive pas à récupérer les données

Voici mon code qui tient sur une page

<?php 
$db = new PDO('mysql:host=localhost;dbname=tuto-divers','root','root',array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
?>
<?php 
$results = $db->query(" SELECT * FROM news_module ");
$tableau = json_encode($results->fetchall());
 ?>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <title>News Module</title>
  </head>
  <body ng-app>
    <div id="hidden" style="display:none;"><?php echo $tableau; ?></div>
  <div class="center">
    <section class="news-module">
      <header class="header">
        <h1>Dernières News</h1>
        <div class="form-select">
          <select name="" id="" ng-model="filter">
            <option value="sport">Sport</option>
            <option value="voyage">Voyage</option>
          </select>
        </div>
      </header>
      <div class="content">
        <ul ng-controller="NewsCtrl">
          <li ng-repeat="entry in news">
            <h2>{{entry.category}}</h2>
            <p>{{ entry.name }}</p>
          </li>
        </ul>
      </div>
      <footer class="footer">

      </footer>
    </section>
  </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
      var tableau = $('#hidden').html();
      function NewsCtrl($scope){
        $scope.news = [tableau];
      }   

    </script>
  </body>
</html>

Merci d'avance

antho07

Bonjour , pourquoi faire comme cela?

et pas mettre ton php dans le code js directement?

$scope.news = <?php echo $tableau;?> ;

Sinon j'imagine que là ton JSON est sous forme de chaine de caractère et non d'objet.
Essaye alors un

var tableau = JSON.parse($('#hidden').html());
      function NewsCtrl($scope){
        $scope.news = tableau;
      }

cordialement

Yentia

Salut,

Je pense que la meilleur solution c'est de faire une requête ajax avec Angular en utilisant le service http ( $http.post() ), tu crée ton fichier PHP qui effectue uniquement ta requête sql et a la fin tu fais un return de json_encode.

Apres ce retour tu le passe au scope et tu en fais ce que tu veux.

En espérant avoir pu aider :)

Cordialement

Probleme avec ng-repeat ( AngularJS)

2 réponses