2016-12-15 5 views
1

私はコーディングに新しいですし、私は角度のjsを始めています....私はJSON形式の印刷に必要なデータNG-repat

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

は今、私の要件は示すことで下のようなJSONを持って

私は新しいです言ったように、HTML内の他の後の各値の1 .....

は、私はこれをGoogleで検索し、NG・リピートのようないくつかの情報を見つけましたが、私は実装しながら、これをで使用する方法を理解していませんでしてきました。

答えて

2

NG-repeatが指定した配列内のデータを反復しますあなたの応答のためのおかげで....ここで私は、オブジェクトキーを印刷するには、vakue概念をキーを使用して

<!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

これは私が期待しているものであり、ブランド名を一度に印刷する方法を私に明示しました – hehe

関連する問題