首页 文章

如何在AngularJs中使用ng-repeat进行词典？

提问于
浏览 次
280

我知道我们可以轻松地对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＃中返回字典中的值？

angularjs json dictionary angularjs-ng-repeat

3 回答

  • 27

    您可以使用

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

    见ngRepeat documentation . 示例：http://jsfiddle.net/WRtqV/1/

    回复于
  • 6

    我还想提一下AngularJS ng-repeat的新功能，即特殊重复 start 和 end points . 添加了该功能是为了重复一系列HTML元素，而不是仅重复单个父HTML元素 .

    要使用转发器的起点和终点，必须分别使用 ng-repeat-start 和 ng-repeat-end 指令来定义它们 .

    ng-repeat-start 指令与 ng-repeat 指令的工作方式非常相似 . 区别在于将重复 all HTML元素（包括它定义的标记），直到放置 ng-repeat-end 的结束HTML标记（包括带有 ng-repeat-end 的标记） .

    Sample code (from a controller):

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

    Sample HTML template:

    <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 ）也可按预期工作 .

    回复于
  • 549

    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 method，它将为您执行上述任务：

    var values = _.values(users);

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

    回复于

相关问题