Question

$scope.features =
    {
    "administrative": [
        { id: 1, val: "Country"},
        { id: 2, val: "Province"},
        { id: 3, val: "Locality"},
        { id: 4, val: "Neighborhood"},
        { id: 5, val: "Land parcel"}
    ],
    "landscape": [
        { id: 1, val: "Man made"},
        { id: 2, val: "Natural"}
    ]
};

<ul>
    <li ng-model="features" ng-repeat="feature in features">{{feature.i}}</li>
</ul>

使用AngularJS我试图遍历我的数据并首先创建一个包含administrative和landscape的列表，而不是在每个父级中获得子数据的输出。

Answer 1

如果您只希望首先显示要素中的每个项目，则必须使用：

<ul>
  <li ng-model="xyz" ng-repeat="(key, values) in features">{{ key }}</li>
</ul>

我觉得像this demo这样的东西就是你要找的东西。

Answer 2

要迭代对象的键，您需要使用以下语法，如the documentation中所述：

表达式中的
（key，value） - 其中key和value可以是任何用户定义的标识符，expression是赋予集合枚举的范围表达式。

例如：{＆＃39; adam＆＃39;：10，＆＃39; amalie＆＃39;：12}中的（姓名，年龄）。

<ul>
    <li ng-repeat="(featureName, featureArray) in features">{{ featureName }}</li>
</ul>

Answer 3

你非常接近，ng-repeat的主要部分必须是一个数组，所以指定功能，混淆它，但feature.administrative将工作。然后在插值标记{{}}内，指定对象的字段。此外，您不需要ng-model。

试试这个。

<li ng-repeat="feature in features.administrative">{{feature.val}}</li>
<li ng-repeat="feature in features.landscape">{{feature.val}}</li>

AngularJS ng-repeat和li列表

3 个答案: