287

我知道我们可以轻松地将ng-repeat用于 json 对象或数组，例如：

<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# 中的字典中返回值？

4

4 回答 4

561

您可以使用

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

请参阅ngRepeat 文档。示例：http: //jsfiddle.net/WRtqV/1/

于 2012-08-16T11:37:35.290 回答
27

我还想提一下AngularJSng-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）也可以按预期工作。

于 2013-12-17T16:59:52.790 回答
6

JavaScript 开发人员倾向于将上述数据结构称为对象或哈希，而不是字典。

上面的语法是错误的，因为您将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库绝对值得一看。Underscore 附带了一个values方法，它将为您执行上述任务：

var values = _.values(users);

我自己不使用 Angular，但我很确定会内置一种方便的方法来迭代哈希值（啊，我们走了，Artem Andreev 提供了上面的答案:)）

于 2012-08-16T11:39:29.373 回答
-1

在 Angular 7 中，以下简单示例可以工作（假设字典位于名为 的变量中d）：

我的.component.ts：

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

this.keys = Object.keys(d);

my.component.html: （将显示键：值对列表）

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>
于 2019-01-17T17:15:39.293 回答