如何在AngularJs中为ng-repeat使用字典?
我知道我们可以很容易地使用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#中的字典返回值?
您可以使用
<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>
请参阅ngRepeat文档 。 例如: http : //jsfiddle.net/WRtqV/1/
我还想提一个AngularJS ng-repeat
的新function,即特殊的重复开始和结束点 。 该function是为了重复一系列 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
)也可以按预期工作。
JavaScript开发人员倾向于将上述数据结构称为对象或散列而不是字典。
上面的语法是错误的,因为您将users
对象初始化为空。 我认为这是一个错字,因为代码应该是这样的:
// 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提供了上面的答案:))