如何使用ng-repeat字典在AngularJs?

我知道我们可以很容易地为json对象或数组使用ng-repeat，例如:

<div ng-repeat="user in users"></div>

但是我们如何在字典中使用ng-repeat，例如:

var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}";

我想用用户的字典:

<div ng-repeat="user in users"></div>

这可能吗?如果是，我如何在AngularJs中做到这一点?

我的问题示例: 在c#中，我们这样定义字典:

Dictionary<key,value> dict = new Dictionary<key,value>();


//and then we can search for values, without knowing the keys
foreach(var val in dict.Values)
{
}

是否有一个内置函数可以像c#一样从字典中返回值?

175057 次浏览
小开
最佳答案

你可以使用

<li ng-repeat="(name, age) in items">\{\{name}}: \{\{age}}</li>

看到ngRepeat文档。例如:http://jsfiddle.net/WRtqV/1/

小开

JavaScript开发人员倾向于将上述数据结构称为对象或散列，而不是Dictionary。

你上面的语法是错误的，因为你将users对象初始化为null。我认为这是一个拼写错误，因为代码应该是这样的:

// Initialize users as a new hash.
var users = {};
users["182982"] = "...";

要从哈希中检索所有值，你需要使用for循环遍历它:

function getValues (hash) {
var values = [];
for (var key in hash) {


// Ensure that the `key` is actually a member of the hash and not
// a member of the `prototype`.
// see: http://javascript.crockford.com/code.html#for%20statement
if (hash.hasOwnProperty(key)) {
values.push(key);
}
}
return values;
};

如果你打算在JavaScript中使用大量的数据结构，那么underscore.js库绝对值得一看。下划线带有values方法，它将为你执行上述任务:

var values = _.values(users);

我自己不使用Angular，但我很确定会有一个方便的方法来迭代哈希值(啊，好了，Artem Andreev提供了上面的答案:))

小开

我还想提一下AngularJS ng-repeat的一个新功能，即特殊重复开始和结束点。添加该功能是为了重复HTML元素的系列，而不仅仅是单父HTML元素。

为了使用中继器的起点和终点，你必须分别使用ng-repeat-start和ng-repeat-end指令来定义它们。

ng-repeat-start指令的工作原理与ng-repeat指令非常相似。区别在于它将重复所有 HTML元素(包括定义它的标记)，直到放置ng-repeat-end的结束HTML标记(包括带有ng-repeat-end的标记)。

示例代码(来自控制器): 

// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...

示例HTML模板: 

<div ng-repeat-start="(id, user) in users">
==== User details ====
</div>
<div>
<span>\{\{$index+1}}. </span>
<strong>\{\{id}} </strong>
<span class="name">\{\{user.name}} </span>
<span class="age">(\{\{user.age}})</span>
</div>


<div ng-if="!$first">
<img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
======================
</div>

输出将类似于以下(取决于HTML样式):

==== User details ====
1.  119827 Stephan (18)
======================
==== User details ====
2.  182982 John (30)
[sample image goes here]
======================
==== User details ====
3.  198784 Antonio (32)
[sample image goes here]
======================

如你所见，ng-repeat-start重复所有HTML元素(包括带有ng-repeat-start的元素)。所有ng-repeat的特殊属性(在本例中是$first和$index)也可以正常工作。

小开

在Angular 7中，下面这个简单的例子就可以工作了(假设dictionary在一个名为d的变量中):

my.component.ts:

keys: string[] = [];  // declaration of class member 'keys'
// component code ...


this.keys = Object.keys(d);

html:(将显示键值对列表)

<ul *ngFor="let key of keys">
\{\{key}}: \{\{d[key]}}
</ul>

提交答案