代码之家 › 专栏 › 技术社区 › hehe

json使用ng repat打印所需数据

ng-repeat

hehe · 技术社区 · 8 年前

我对编码是新手,我从angular js开始。。。。

我有一个json,如下所示

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

现在,我的要求是在html中一个接一个地显示每个值。。。。。

笔记正如我所说,我是新手,我在谷歌上搜索了这个,找到了一些类似ng repeat的信息,但我不知道如何在实现时使用它。

谢谢你的回复

1 回复 | 直到 8 年前

Sa E Chowdary 8 年前

ng repeat将迭代给定数组中的数据……这里我使用key,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>

推荐文章

Nabarag Paul · 比较两个数组并更改角度中ng重复项的样式

8 年前

Sammi · 在离子项中不显示ng重复的文本

8 年前

hehe · json使用ng repat打印所需数据

8 年前

I.Swen · Angularjs ng重复,按键的值数组

8 年前

Tobi · ng重复无输出

8 年前

CrazzyMarc Nilesh Mahajan · ngRepeat基于选择

8 年前

Valor_ user3379466 · ng重复中的动态ng模型未定义

8 年前

B.Wesselink · 行达到XX时添加另一列

8 年前

dude · ng重复:达到10$digest()迭代次数

9 年前

jjprz · 使用angularjs选择选项时更新输入文本的值

9 年前