2016-12-15 22 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等後.....

注意 正如我說我是新的,我用Google搜索,發現這個類似NG-重複一些信息,但我不知道如何使用這個,同時實現。

感謝您的答覆

回答

2

NG重複會遍歷數據給定數組中....我這裏使用的密鑰,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