如何使用angularjs ng-repeat迭代并获得json值？
在使用AngularJS的ng-repeat指令迭代并获取JSON值时，首先需要确保你的控制器中有一个包含数据的JSON对象。以下是一个基本的例子来说明如何做到这一点：
HTML部分
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ng-repeat Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items">{{ item.name }}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>JavaScript部分（app.js）
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{name: 'Item 1'},
{name: 'Item 2'},
{name: 'Item 3'}
];
});在这个例子中，我们创建了一个名为myApp的AngularJS模块和一个名为myCtrl的控制器。控制器中定义了一个名为items的数组，它包含了几个对象，每个对象都有一个name属性。
在HTML部分，我们使用ng-repeat指令来迭代items数组，并显示每个对象的name属性。
应用场景
ng-repeat非常适合用于动态生成列表，例如：
- 显示商品列表
- 展示用户评论
- 列出任务清单
可能遇到的问题及解决方法
- 数据未显示：确保AngularJS库已正确引入，并且
ng-app和ng-controller指令已正确设置。 - 迭代错误：检查
ng-repeat中使用的语法是否正确，确保迭代的对象是一个数组。 - 数据绑定问题：如果数据是通过异步请求获取的，确保数据在
ng-repeat执行前已经绑定到作用域。
参考链接
通过以上步骤，你应该能够成功使用ng-repeat迭代JSON值并在页面上显示它们。如果你遇到任何具体的问题，可以根据错误信息进一步调试。
相关·内容
1回答
我有这样的数据：
$scope.list = {
0:{'type':'text','required':true},
1:{'type':'text','required':false},
2:{'type':'text','required':true}
};
我用ng-重复来创建表单
<div ng-repeat="l in list">
<input type="{{l.type}}&#
浏览 2提问于2014-02-28得票数 1
回答已采纳
6回答
我有一个名为znanja的嵌套JSON "object“，我想在我的网页上显示它。它将包含一些我想要列到列表中的值。基本上，我正在建立一个投资组合，并想列出我的技能。到目前为止，我已经成功地显示了标题和整个对象，或者调用了一个特定的对象(例如{{ znanje.ena }})，但是我不知道如何在没有属性名的情况下显示它们。如果我只调用{{ znanje }}，我会在JSON中列出它们。我可以用angularJS指令来完成这个任务吗？我刚接触过棱角，所以任何帮助都很感激。
我的看法是：
<div ng-repeat="skill in skills">
浏览 7提问于2015-12-29得票数 0
回答已采纳
我想对使用JSON数组动态添加的产品计数求和。
<tr ng-repeat="(key,val) in form.products">
<td>{{ProductName(key)}}</td>
<td >
<input type="text" name="products" ng-model="form.products[key
浏览 1提问于2016-02-20得票数 1
我有一个数据数组，它包含对象(JSON格式)。
var users = {
'New':{
{Name:'One'},
{Name:'Two'}
},
'Old':{
{Name:'Three'},
{Name:'Four'}
}
我使用这个结构来显示数据：
<div ng-repeat="(key, value) in users">
<p>{{key}}</p>
<div ng-re
浏览 4提问于2015-02-05得票数 3
回答已采纳
function ListServers($scope) {
$scope.count = function() {
return Object.keys(this.response.servers).length;
};
$scope.response={
"status":true,
"servers": {
"vegas.domain.org": {
"nickname":"Vegas VP
浏览 0提问于2013-06-12得票数 0
回答已采纳
我在从ng-repeat获取数据方面遇到了问题。
<tr ng-repeat="x in records">
<td>{{x.id}}</td>
<td>{{x.title}}</td>
<td>{{x.year}}</td>
<td>{{x.note}}</td>
</tr>
{{x.id}}是我想从JSON获得的tt0013158。
下面是JSON：
{"result":{
"tt001315
浏览 2提问于2016-05-30得票数 2
回答已采纳
我对angular.js还不熟悉，我只是在做一个函数ng-repeat。在其中，我使用ng-repeat="x in name"，其中定义了names中的一些值，但没有在完整代码中定义x。
这是我的代码：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</
浏览 8提问于2016-06-01得票数 2
回答已采纳
4回答
我知道，对于json对象或数组，我们可以很容易地使用ng-重复，例如：
<div ng-repeat="user in users"></div>
但是我们如何对字典使用ng-重复，例如：
var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}
浏览 14提问于2012-08-16得票数 287
回答已采纳
从web服务中，我得到了一个JSON字符串。它可能会根据请求而有所不同。2 JSON结果如下
结果1
[
{
"Key": 1,
"ID": 1,
"applicationId": "1",
"applicationName": "APP1"
},
{
"Key": 2,
"ID": 1,
"applicationId": "2",
"applicati
浏览 3提问于2014-04-05得票数 3
回答已采纳
我试图以正确的顺序显示特定JSON的值。我的JSON看起来像：
{
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
&
浏览 2提问于2015-07-08得票数 0
回答已采纳
5回答
我有一个名为productImages的角控制器，它返回以下JSON数据：
{
"Product_1":[
{ "image_id":"12469",
"name":"My Product 1 - Variety 1",
"url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
},
{
"
浏览 0提问于2015-11-05得票数 0
3回答
我刚接触angularjs，创建了一个phonegap项目。在我的项目中，我正在使用WP JSON API User Plus插件来获取json格式的数据，API给出的响应内容很少，我还需要调用另一个API，从上一个API获取参数。是否可以在ng-repeat中调用API来加载不同的数据。
我正在获取json格式的数据，并将数据加载到ng-repeat中，我尝试过这样做
<tr ng-repeat="app in multipleApps" ng-init="getActivationDate(app)">
<td><h4&
浏览 24提问于2016-07-21得票数 2
<label ng-repeat="role in roles">
<input type="checkbox" data-checklist-model="user.roles" data-checklist-value="role"> {{role.text}}
</label>
$scope.roles = [
'guest',
'user',
'customer',
'admin'
浏览 2提问于2016-06-21得票数 0
回答已采纳
2回答
我正在尝试拆分从angular中的JSON数组中拉出的字符串。我试过使用angular ，但不确定我是否走对了路。我希望每个标签都有自己的链接。ie <a ng-href="">tall</a> | <a ng-href="">large</a> etc...
<body ng-app="feedApp">
<div ng-controller="FeedController as feedCtrl">
<ul class="
浏览 0提问于2015-07-30得票数 0
我想对给定的json在ng-repeat上迭代并获得name值：test01、test02和test03。如何使用ng-repeat获取它？请提前让我知道并感谢。 Fiddle是可用的。
浏览 25提问于2016-09-16得票数 0
回答已采纳
我有一份电子邮件地址和地址的输入表格。
用户可以添加多达3封电子邮件和地址线动态地点击+符号在输入字段的右边。
当i ng-repeat输入字段时，对于每个输入字段也会重复+。如何仅对$index值最大的最后一个输入字段显示该+。
浏览 4提问于2015-06-24得票数 5
回答已采纳
我想从JSON对象访问一个属性。对象是
$scope.people = [
{
"name": "Adam",
"age": "21",
"places": {"town": "IL"},
"work": "Manager"
},
{
"name": "Christina",
"age"
浏览 2提问于2017-07-24得票数 1
回答已采纳
如果我用{{result.title}}调用页面，那么Json代码可以正常工作，但是如果我想调用author的子元素，json元素就不能工作。
控制器
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope,$http) {
$http.get('post.json')
.then(function (response){
console.log(response.data);
浏览 4提问于2016-09-15得票数 0
3回答
我有以下JSON：
{
"records":[
{
"TrackID":"4",
"ownerID":"14",
"name":"Test1",
"minTime":"2015-04-08T16:50:51Z",
"maxTime":"2015-04-08T17:26:39Z",
"tra
浏览 1提问于2015-04-25得票数 3
1回答
我使用3个嵌套的ng-repeat来读取一个json，并显示几个问题和他的答案。在此之前，它是有效的，但现在我正在尝试存储选定的答案，并将其发送到API。我不知道为什么选择的答案没有存储。
这是我的观点：
<form>
<div class="panel panel-default" ng-repeat="section in questionsTest">
<div class="panel-heading">
<h1>{{ section.name
浏览 12提问于2017-01-08得票数 0
我正在构建一个筛选器AngularJS，只显示查询中包含当前日期的数据，但我无法让它工作。
-J_Wjq2vkPJxCkmk3Wxp
Estado: "pendiente"
FechaActividad: "2014-11-11"
NombreActividad: "Actividad 1"
-J_WrCwULkPGRD5-mZ6z
Estado: "aprobado"
FechaActividad: "2014-10-11"
NombreActividad: "Activid
浏览 4提问于2014-11-12得票数 1
1回答
如何将以下数组的值作为ng表的列标题重复？
我试图将来自$scope.cols数组的值显示为表的列标题，换句话说，作为字段，并显示所有行。
以下是我的尝试：
<div ng-controller="mycontroller as projects">
<table ng-table-dynamic="projects.tableParams with projects.cols"
show-filter="true" class="table table-bordered table-
浏览 4提问于2016-11-02得票数 1
回答已采纳
我的服务给出了下面的json结果
{"categories":[{"category_id":"20","name":"Desktops"}, {"category_id":"18","name":"Laptops &},{"category_id":"25","name":"Components"},
{"category_id":"57",&#
浏览 4提问于2016-09-03得票数 0
回答已采纳
$scope.radiolabels={
Name:"",
type:"radiobtns",
rbtn:[{
Name:"",
order:$scope.order
}]
};
如何迭代objct及其rbtn.我的意思是，在第一个div中，我们必须迭代对象，在第一个
浏览 0提问于2015-10-30得票数 0
我正在尝试对一个json数组执行ng-repeat。我可以做“日历中的事件”的第一次迭代。但我不必手动遍历每个数字。这是可行的：
<div ng-repeat="event in calendar">
{{event[0].custom_fields.location[0]}}
{{event[0].custom_fields.price[0]}}
{{event[1].custom_fields.location[0]}}
{{event[1].custom_fields.price[
浏览 1提问于2015-10-11得票数 1
1回答
我把这个作为我的.json文件，我在考虑如何将"ip“数组显示到我的.html中。
[
{
"network":"net1",
"ip":[
"192.168.0.1",
"192.168.0.2"
],
"zone":"LAN"
},
{
"network":
浏览 4提问于2014-07-25得票数 0
回答已采纳
我有一个用ng-repeat填充的表。当单击行时，我使用ng-click检索与对象相关的数据。该表由一个json文件填充。当所选行被单击时，如何隐藏表中的所有其他行？
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age&l
浏览 13提问于2017-01-14得票数 0
回答已采纳
2回答
我有两个问题。
1)如何使用angularjs翻译和ng-repeat？
我有一个Json文件，所有的文本都可以工作，但是ng-repeat不行。我在json中的片段：
"rules":{
"points":[
{"text":"1"},
{"text":"2"},
{"text":"3"}
]
}
我试着写这样的东西，但它不起作用：
<ul ng-repeat="rule in
浏览 0提问于2018-01-27得票数 0
我正在尝试实现。添加标签和删除标签，如芯片样式的项目，为此，我需要拆分字符串和绑定分别基于数组的拆分。
如何在绑定数据时拆分逗号扩展的动态长度字符串。
我怎么能在这里使用角度滤波器
请检查以下代码。
JS:主计长：
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
var temp= {
"values": [
{
"id": "1",
"tags&
浏览 1提问于2016-09-25得票数 2
回答已采纳
在AngularJS中，是否有可能从ng-init返回一些内容，即ng-repeat中的内容，然后对结果执行ng-repeat？例如，如果我有
<ng-repeat="c in customers">
<div ng-init="getItems(c)">
{{object returned from getItems(c)}}
</div>
</div>
如何访问从getItems(c)返回的JSON对象？
浏览 1提问于2020-01-02得票数 0
3回答
我有多个复选框。
<div ng-repeat="setting in settings">
<input type="checkbox" name="setting.name" ng-model="setting.value">{{setting.name}}
在控制器中
$scope.settings = [{
name: 'OrderNr',
value: ''
}, {
nam
浏览 0提问于2014-04-28得票数 1
目标:我希望$scope .pluraliser在选择年份时返回随机值，例如1966，如果多个值相同，它将始终选择最后一个值。
$scope.pluralizer ={
1966 : "Something New !",
1966 : "Something Different!",
1966 : "Something Else",
1967 : "Something New !",
1967 : "Something Different!"',
19
浏览 0提问于2017-04-17得票数 0
2回答
我有一个ng-repeat来循环我要查看的对象值。然后我想要有一个按钮来添加新的空白元素到最后的ng-repeat值。
我如何在angular中做到这一点？
我的数据是json对象。我试过了
In controller
$scope.objs = {'a': 'a', 'b':'b'};
In view
{{Object.keys(objs).length}};
But nothing show in view.
更新
<div ng-repeat="docstep in docs.docsteps" cl
浏览 1提问于2013-08-09得票数 0
2回答
我试图从表单中处理提交的数据对象，但我被卡住了。我在这个网站上做了一些研究，花了几个小时阅读，但没有得到任何答案。我可以在没有问题的情况下获得表单数据，问题是当客户在两个或两个以上的酒店注册客人时。在预标记中，它将显示hotel_name:{"hotelx“、"hotely"}。我想把它作为JSON存储在我的住宿文件中，但是当我的控制器接收到表单数据对象时，如何进入它并得到我需要的东西，这样我就可以将它推送到文件中了。
<div class=" col-md-12">
<div class="md-for
浏览 5提问于2017-02-10得票数 3
回答已采纳
我有以下数据：
{
"records": [
{
"name": "Visits",
"jan": "25000",
"feb": "31050",
"type" : "number"
},
{
"name": "CPC",
浏览 3提问于2015-07-05得票数 1
回答已采纳
2回答
我有一个来自这种性质的json响应的json数组。
data {"success":true,"errorCode":0,"data":["kkkk-kkkk 1","oooo-ooooo 2"]}
第1项预计为>>> kkkk-kkkk 1
第2项预计为>>> oooo-ooooo 2
在角脚本控制器中，我这样做是为了将数组推到html视图中。
else if (res.status == 200) {
$scope.partners = [];
浏览 0提问于2018-08-17得票数 0
回答已采纳
1回答
我需要在textarea中显示一个JSON数组，但需要做一些小修改。
位于'list‘和$scope.list中的JSON数组绑定到JSON对象。
如何将分隔符从逗号更改为\n？
json名单：
{
"items" : [ { "outputs" : ["one","two"] } ]
}
html：
<div ng-repeat="record in list">
<textarea ng-model="record.outputs"></tex
浏览 3提问于2014-03-11得票数 1
回答已采纳
我从facebook上得到了json，我用facebook.json保存了这些数据
从我的控制器中从json获取数据
app.controller('Ctrl', function($scope, $http) {
$http({method: 'GET', url: 'facebook.json'}).success( function(data){
$scope.info = data; // response data
});
});
Json把它归档了
{
浏览 1提问于2014-02-14得票数 0
回答已采纳
我有一个使用angularjs的表，在该表中，我希望遍历一个数组来从json对象中打印特定的标题。头很好地打印出来，但是当我尝试使用嵌套ng重复中的变量作为json选择器时，问题就出现了。如果您用下面的注释部分替换内部ng-重复，它将工作。
表：
<table>
<thead>
<th ng-repeat="column in tableHeader">{{column}} <a ng-click="sort_by(column);"><i class="gl
浏览 1提问于2015-04-09得票数 1
回答已采纳
我是使用angularjs和angular用户界面的新手。我对标签很感兴趣。
这是我的html
<select id="part1" ui-select2 ng-model="params.id" style="width: 200px;">
<option value="">Provinsi</option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text
浏览 0提问于2013-04-22得票数 11
回答已采纳
1回答
获取键值并创建表头
、、、
我有一个angularjs应用程序，它基本上接受JSON并创建一个HTML表，其中的键在<thead>中，值作为表行。
我有一个，在这里我接受JSON并根据值创建表行。但我不知道如何获取键并将它们与作为表标题的值对齐。
我的角度代码：
<tr ng-repeat='row in rows'>
<td ng-repeat="data in row.data">
{{data}}
</td>
</tr>
以及：
function TableController($scope){
浏览 1提问于2013-12-03得票数 0
回答已采纳
1回答
给定该服务(只是在服务器上获取一个json )
SushiServices = angular.module("SushiServices",[])
SushiServices.factory("DataTypeService",["$http",($http)->
self = {}
self._data = []
self._inilialized = false
return ->
if self._inilialized ==false
$http.g
浏览 5提问于2012-12-13得票数 0
回答已采纳
2回答
我有这个json。如何在angularjs中显示img/n.jpg？我下面有多张照片。
bb.json
{
"bb": [
{
"chapter": "1",
"images": ["img/1.JPG", "img/2.jpg"]
},{
"chapter": "2",
"images": ["img/2.jpg", "img/3.jpg"]
},{
"ch
浏览 0提问于2015-07-15得票数 0
回答已采纳
我是AngularJS的新手。
有人能解释一下为什么active类不能在以下代码中的选项卡之间切换：
angular.module('myApp', [])
.filter('split', function () {
return function (input, string) {
var temp = string.split('|');
for (var i in temp)
input.push(temp[i]);
return input;
};
浏览 2提问于2013-12-10得票数 1
回答已采纳
我的JSON文件包含服装尺寸和库存数量。
[{"46":0},{"48":0},{"50":0},{"52":0},{"54":0},{"56":0},{"58":0},{"60":0},{"94":0},{"98":0},{"102":0},{"106":0},{"110":0},{"24":0},{"25":0},{"26":0},{&#
浏览 12提问于2015-01-13得票数 0
回答已采纳
我正在用Angularjs ng-repeat创建学生报告列表。我的问题是如何动态地将编号附加到视图中生成的列表中，如有序列表。我想要达到这样的效果
# | Name of student | Student ID
_________________________________
1 | Samuel Addo | 346578
2 | GRace Asumani | 965433
3 | Zein Akill | 123455
4 | David Addoteye | 678543
在视图中通过ng-repeat呈现模型时，应该自动生成'#‘列。
浏览 0提问于2015-03-17得票数 15
回答已采纳
2回答
将所有对象数组作为列表列出，使用ng-重复，并为每个值添加复选框。
在这里，我希望过滤复选框，并在单击、Apply filter、基于复选/取消选中值(复选框)的基础上形成新的JSON。
实际
我尝试通过连接筛选器名称及其值，在模型作用域对象($scope.models)中添加选中和未选中的复选框
(i.e)：data1(过滤器名称)+1(值)= data11
单击，应用过滤器，循环现有过滤器数组，并与模型对象进行比较，并将匹配推送到新数组中。
应用过滤函数
<li ng-repeat="(key, filter) in filters">
<a href
浏览 0提问于2019-01-05得票数 2
回答已采纳
2回答
我在一个表格中有2ng重复如下：
<tr>
<th ng-repeat="header in headerdata">{{header}}</th>
</tr>
<tr ng-repeat="row in data">
<td ng-repeat="header in headerdata">{{row.header}}</td>
</tr>
在这里，我希望{{row.header}内的标题与来自标记中的头数据的标题中的值绑定。
我尝试
浏览 3提问于2015-02-12得票数 0
2回答
上面是API返回的JSON数据的图片。正如您所看到的，一些JSON键有两个单词，中间有一个空格。我如何在我的angular应用程序中访问它。这将以数组BTW的形式出现。
我试过了：
<li ng-repeat="task in mainTask.Tasks"> {{ task.['CAR ID'] }} </li>
不走运。谢谢你的帮助。
浏览 17提问于2016-07-26得票数 6
回答已采纳
1回答
如何根据数组中的可用选项启用或禁用单选按钮
// Code goes here
var app = angular.module('app', ['ui.directives','ui.filters']);
app.controller('ctrl', function($scope, $filter,$http) {
$scope.pageNumber = {};
$http.get('https://cdn.rawgit.com/rainnaren/20355aea389ba6f7b
浏览 4提问于2017-11-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
