如何在AngularJs中将ng-repeat用于字典?


285

我知道我们可以轻松地对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#中那样从字典返回值?


1
字典和JSON对象之间有什么区别?我相信javascript中没有任何东西!
markmarijnissen 2014年

8
@markmarijnissen:JSON对象比JavaScript对象具有更严格的语法规则。而且,因为我们已经在Pedant的角落里,所以JavaScript中没有“字典”之类的东西。我们只是称它们为对象。
Paul D. Waite 2014年

Answers:


556

您可以使用

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

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


53
这不是我问的,而是我想要的。谢谢Artem Andreev
Vural 2012年

1
我们如何在此ng-repeat中使用filter。在我使用搜索过滤器的情况下,它不起作用。在项目中输入<input type =“ text” ng-model =“ searchText” /> <li ng-repeat =“(姓名,年龄)| filter:searchText”> {{name}}:{{age}} </ li> ...
Shekhar

1
@Shekhar过滤器“过滤器”仅适用于数组。您可以尝试创建功能请求。
Artem Andreev

2
很高兴看到python有一些共性:)
罗伯特·金(Robert King)

4
您甚至可以通过使用ng-if语句在字典(对象)上获得过滤器功能。例如,例如:<li ng-repeat =“(id,obj)in items” ng-if ='obj.sex =“ female “'> {{obj.name}} {{obj.surname}} </ li> ...其中item是由某个键索引的一组人员。
giowild 2014年

27

我还要提到AngularJSng-repeat的新功能,即特殊的重复起点终点。添加该功能是为了重复一系列 HTML元素而不是单个父HTML元素。

为了使用转发器的起点和终点,必须分别使用ng-repeat-startng-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)也可以按预期工作。


错误:[$ compile:uterdir]未终止的属性,找到了“ ng-repeat-start”,但找不到匹配的“ ng-repeat-end”。
zloctb

@zloctb,您必须跳过<div ng-repeat-end>..</div>标记
John Kaster

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库绝对值得一看。下划线带有一种将为您执行上述任务的values方法

var values = _.values(users);

我自己没有使用Angular,但是我很确定会内置一个方便的方法来迭代哈希值(嗯,我们去了,Artem Andreev提供了上述答案:))


1
+1表示underscore.js和这些有用的信息。谢谢约翰尼!
2012年

0

在Angular 7中,以下简单示例将起作用(假设字典位于名为 d):

my.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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.