How to iterate over the keys and values with ng-repeat in AngularJS?
在我的控制器中,我有如下数据:
现在,这些数据是带有来自
我可以使用模板中的
数据是这样的
1 2 3 4 5 6 7 | { "id": 2, "project":"wewe2012", "date":"2013-02-26", "description":"ewew", "eet_no":"ewew", } |
怎么样:
1 2 3 4 5 | <table> <tr ng-repeat="(key, value) in data"> <td> {{key}} </td> <td> {{ value }} </td> </tr> </table> |
此方法在文档中列出:https://docs.angularjs.org/api/ng/directive/ngrepeat
- 它不起作用,我试过了,它显得空荡荡的。我将JSON数据保存在数据对象中。我可以看到行数作为项目,但它们是空的
- 它应该工作:plnkr.co/edit/7aqf6k7hf2azbwfmhvox?P =预览。你能修改它直到它停止工作吗?
- 它使用
。你能查查原因吗 - 如果你不给我你的代码,我就不明白为什么你的代码不起作用。:-)但是这里有相同的东西,为
修改:plnkr.co/edit/7aqf6k7hf2azbwfmhvox?P=预览 - 谢谢,现在可以用了,我想我和tbody没有适当的餐桌标记,这就是为什么它不能用的原因。
- 没有它也能工作:plnkr.co/edit/7aqf6k7hf2azbwfmhvox?P =预览。可能只是某个地方的打字错误。很高兴我能帮忙!
- 是的,可能是,我只是复制粘贴了你的代码
- 是的,我在里面多了一个。我把它拿走了。很抱歉。
- 它像一种魅力。唯一需要注意的是,它将按键的字母顺序排列,因此,如果项目顺序与显示相关,则命名很重要。
- @Isabelhm由于许多原因,我们中的许多人建议不要迭代
ngRepeat 中的对象。事实上,我曾经听说一个核心团队成员后悔有能力做到这一点!通常最好将控制器中的对象转换为一个数组;这会使意图更清晰,并降低在某些情况下发生奇怪/不可预测行为的风险。你可以用通常的方式分类。-)- 正如Isabelhm所说,输出按名称的字母顺序排列。有没有办法强迫它不这样做?
- @米卢,据我所知,没有一种内在的方法可以做到这一点,不。
- 有没有办法将键和值传递给
ng-include 或指令?- @我不知道你的意思,是不是上面发生的事?
- @是的,使用
ngRepeat 迭代一个对象是非常"奇怪"的,但它确实有它的用途。我发现它非常有用…曾经。- @乔希·戴维米勒-从角度1.4开始,对一个物体重复的ng不再适合orderby…这是您的Punk稍微修改过的:plnkr.co/edit/gi2dqasiuwn9j3logg7q?P =预览。
- @sethflowers正如我在前面的注释中提到的,我不建议迭代对象中的键。最好将其转换为控制器中的数组。假设没有基于您的业务模型的惯用方法来实现这一点,ES6使之非常容易:
Object.getOwnPropertyNames(data).map(k => ({key:k, value:data[k])); 。- @乔什达维米勒,你能解释一下为什么迭代对象中的键并使用数组是不好的吗?如果你处理的是大数据呢?我觉得你不想每次在地图中添加一个项目时都要搜索数组中的键来牺牲性能。我想您可以通过维护key=>arrayindex的映射来避免性能损失,但是它增加了另一层复杂性和检索中的额外步骤。
- @克里斯曼宁,我不会说这是"坏",但我通常不推荐。顺序可能是不可预测的,继承的属性经常会有挑战,对象不打算是可重复的(所以您的模型可能不反映您的业务)。但总有例外。
- @乔什达维米勒有趣的是,你提到这一点是因为我在打字后遇到了你提到的一个问题。本质上,我必须基于一个组UUID对某些实体进行分组,然后我意识到它们有一个属性,我需要通过它来订购它们。我想我需要对创建地图前的列表进行排序。当然,我必须把它转换成二维数组,因为我使用的是角1.2.x,谢谢你的解释/跟进。非常感谢
- URL应该更新到docs.angularjs.org API:/ / / ngrepeat毫微克/指令
如果要使用双向绑定编辑属性值:
1
2
3<tr ng-repeat="(key, value) in data">
<td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>- 谢谢你!走出你的好奇心,这一技术在someplace查找文件?我在找你找的到答案在这里。
- 这就是美国:"我是找的。好的,谢谢
- 谢谢你,你救了我的一天:)
- 非常漂亮的。好的,谢谢!
- 一些原因和更新的值是输入,光标是复位。
- 一种求解上投票的要求。
- "这是不是所有的
ng-model="value" 同用吗? - "在本质上是一mikeharrison
ng-repeat iterating对象和返回的关键值对。它for(var value in arrayOfValues) { ... } 智囊团状。如果你再在你的value assign可变环,不改变你是什么,你只是在arrayOfValues ),再到新的value 指责的对象。
我认为在Angular中没有内置函数可以实现这一点,但是您可以通过创建包含所有头名称的单独范围属性来实现这一点,并且您可以像这样自动填充该属性:
1
2
3
4
5
6
7
8
9
10
11
12var data = {
foo: 'a',
bar: 'b'
};
$scope.objectHeaders = [];
for ( property in data ) {
$scope.objectHeaders.push(property);
}
// Output: [ 'foo', 'bar' ]- 如果需要在角度控制器内循环数据,您的答案会很好地工作(OP要求查看循环)。
我们可以按照下面的过程来避免按字母顺序显示键值。
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14$scope.data = {
"id": 2,
"project":"wewe2012",
"date":"2013-02-26",
"description":"ewew",
"eet_no":"ewew",
};
var array = [];
for(var key in $scope.data){
var test = {};
test[key]=$scope.data[key];
array.push(test);
}
$scope.data = array;HTML
1
2
3
4
5
6<p ng-repeat="obj in data">
<font ng-repeat="(key, value) in obj">
{{key}} : {{value}}
</font>
</p>- 在aloowed不重复的关键字
通过
ng-repeat 循环对象的TODO列表示例:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23var app = angular.module('toDolistApp', []);
app.controller('toDoListCntrl', function() {
var self = this;
self.toDoListItems = {};// []; //dont use square brackets if keys are string rather than numbers.
self.doListCounter = 0;
self.addToDoList = function() {
var newToDoItem = {};
newToDoItem.title = self.toDoEntry;
newToDoItem.completed = false;
var keyIs ="key_" + self.doListCounter++;
self.toDoListItems[keyIs] = newToDoItem;
self.toDoEntry =""; //after adding the item make the input box blank.
};
});
app.filter('propsCounter', function() {
return function(input) {
return Object.keys(input).length;
}
});1
2
3
4
5
6
7
8
9
10
11
12<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
<body ng-app="toDolistApp">
Total Items: {{toDoListCntrlAs.toDoListItems | propsCounter}}<br />
Enter todo Item: <input type="text" ng-model="toDoListCntrlAs.toDoEntry"/>
<span>{{toDoListCntrlAs.toDoEntry}}</span>
<button ng-click="toDoListCntrlAs.addToDoList()">Add Item</button> <br/>
<span>{{$index+1}} : {{key}} : Title = {{ prop.title}} : Status = {{ prop.completed}} </span>
</body>- 我们的评论是真的没有用的东西helpful广场。我的代码的变化是固定的。好的,谢谢。
- 我好吗。有人可以解释为什么采用固定卷曲的东西我的代码?
1
2
3
4
5
6Use below code it is working to display your key and value here is key start with 1:
<tr ng-repeat="(key,value) in alert_list">
<td>{{key +1}}</td>
<td>{{value.title}}</td>
</tr>
Below is document link for it.https://docs.angularjs.org/api/ng/directive/ngrepeat/重复
完整示例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59<!DOCTYPE html >
<html ng-app="dashboard">
<head>
AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">
</head>
<body ng-controller="myController">
<table border='1'>
<tr ng-repeat="(key,val) in collValues">
<td ng-if="!hasChildren(val)">{{key}}</td>
<td ng-if="val === 'string'">
<input type="text" name="{{key}}"></input>
</td>
<td ng-if="val === 'number'">
<input type="number" name="{{key}}"></input>
</td>
<td ng-if="hasChildren(val)" td colspan='2'>
<table border='1' ng-repeat="arrVal in val">
<tr ng-repeat="(key,val) in arrVal">
<td>{{key}}</td>
<td ng-if="val === 'string'">
<input type="text" name="{{key}}"></input>
</td>
<td ng-if="val === 'number'">
<input type="number" name="{{key}}"></input>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
var app = angular.module("dashboard",[]);
app.controller("myController",function($scope){
$scope.collValues = {
'name':'string',
'id':'string',
'phone':'number',
'depart':[
{
'depart':'string',
'name':'string'
}
]
};
$scope.hasChildren = function(bigL1) {
return angular.isArray(bigL1);
}
});
</html>您可以在JavaScript(控制器)或HTML(角度视图)中执行此操作…
JS:
1
2
3
4$scope.arr = [];
for ( p in data ) {
$scope.arr.push(p);
}HTML:
1
2
3<tr ng-repeat="(k, v) in data">
<td>{{k}}<input type="text" ng-model="data[k]"></td>
</tr>我相信HTML的方式更有棱角,但你也可以在你的控制器中做,并在你的HTML中检索它…
另外,查看对象键也不是一个坏主意,如果需要,它们会给您一个键数组,更多信息如下:
https://developer.mozilla.org/en/docs/web/javascript/reference/global_objects/object/keys
下面是一个工作示例:
1{{key}} : {{value}}编辑
Copyright © 码农家园 联系:[email protected]