2016-12-15 1 views
1

je suis nouveau au codage et je commence avec js angulaire ....données d'impression JSON nécessaires avec ng-repat

j'ai un JSON comme ci-dessous

$scope.data={ 
    "items": 
     { 
      "yamaha": 
       { 
        "title":"R15", 
        "description":"sports mode", 
        "speed":"180kmph" 
       }, 
      "Tvs": 
       { 
        "title":"apache", 
        "description":"sports mode", 
        "speed":"150kmph" 
       } 
     } 
}; 

maintenant mon exigence est de montrer chaque valeur l'un après l'autre en html .....

Remarque comme je l'ai dit je suis nouveau, j'ai googlé cela et trouvé quelques informations comme ng répétition, mais je ne comprenais pas comment l'utiliser dans la mise en œuvre tout en .

Merci pour votre réponse

Répondre

2

ng répétition itérera sur les données dans le tableau donné ici .... i utiliser la clé, le concept vakue pour imprimer des clés d'objet et les valeurs

<!doctype html> 
 
<html ng-app="plunker" > 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="http://code.angularjs.org/1.1.4/angular.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
<div ng-repeat="(k,v) in data.items"> 
 

 
    <div><h2>{{k}}</h2> 
 
     <p>{{ v.title }}</p> 
 
     <p>{{v.description }}</p> 
 
     <p>{{v.speed }}</p> 
 
    </div> 
 

 

 
</div> 
 
</body> 
 
    <script> 
 
    var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.data={ 
 
     "items": 
 
      { 
 
       "yamaha": 
 
        { 
 
         "title":"R15", 
 
         "description":"sports mode", 
 
         "speed":"180kmph" 
 
        }, 
 
       "Tvs": 
 
        { 
 
         "title":"apache", 
 
         "description":"sports mode", 
 
         "speed":"150kmph" 
 
        } 
 
      } 
 
    }; 
 
    
 
    
 
}); 
 
    </script> 
 
</html>

+0

merci c'est ce que je m'attends et vous m'avez éclairci que comment imprimer des noms de marque à la fois – hehe