AngularJS ng-repeat和li列表

$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>

Using AngularJS I am trying to loop through my data and create firstly a list with administrative and landscape instead I seem to be getting an output of the children data within each parent.

使用AngularJS我试图遍历我的数据并首先创建一个具有管理和横向的列表，而我似乎在每个父级中获得子数据的输出。

3 个解决方案

#1

To iterate over keys of objects, you need to use the following syntax, as explained in the documentation:

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

(key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

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

For example: (name, age) in {'adam':10, 'amalie':12}.

例如：{'adam'：10，'amalie'：12}中的（姓名，年龄）。

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

#2

If you only want each of the item in features to be displayed first then you have to use:

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

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

I think something like this demo is what you are looking for.

我觉得这个演示就像你在寻找的东西。

#3

You are pretty close, the main part of ng-repeat has to be an array, so specifying features, confuses it, but features.administrative would work. Then inside your interpolation tags {{}} you specify fields of the object. Also, you do not need the ng-model.

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

Try this.

尝试这个。

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

#1