Question

我刚刚开始学习AngularJS，我需要能够创建带有标题的列表，然后是其中的项目。

第1类
  第1项   第2项   ETC

  第2类
  第1项   第2项   等

如何创建循环以获取类别标题，然后还获取该类别中的项目？

在代码中我想像这样显示：

<h2>Category 1</h2>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

对不起，我无法提供更多信息，我对语言知之甚少，无法提供更多信息。提前谢谢！

编辑：我试过了：

$scope.categories = ['category 1', 'category 2']

<div ng-repeat="category in categories">
    {{category}}
</div>

有了这个，我不知道如何深入了解物品的另一层。

我也试图做这样的事情（我不知道它是否有效）：

var categories = {$category: $items}

angular.forEach(categories, function(category, items)) {
     //Do Something
}

Answer 1

假设您有这样的数据结构;一组类别，每个类别包含name属性和items数组，其中包含属于该类别的所有项目。

$scope.categories = [
    {
        name: "Category1",
        items: [
            {name: "Item1"},
            {name: "Item2"},
            {name: "Item3"}
            // ...more items
        ]
    }
    // ...more categories
];

您可以使用ng-repeat循环在模板中通过循环遍历categories数组并在每个循环内部对此进行表示，在该类别中的items数组上执行嵌套循环：< / p>

<div class="category" ng-repeat="category in categories">
  <h2>{{ category.name }}</h2>
  <ul class="items" ng-repeat="item in category.items">
    <li>{{ item.name }}</li>
  </ul>
</div>

Answer 2

使用ng-repeat。这是一个例子：

使用Javascript：

var sections = {[
    {
        header: "Header1",
        content: ["one", "two", "three"]
    },
    {
        header: "Header2",
        content: ["one", "two", "three"]
    }
]};

HTML：

<div ng-repeat="section in sections">
    <h2>{{section.header}}</h2>   
    <ul>
        <li ng-repeat="item in section.content">
            "Item: " {{item}}
        </li>
    </ul>
</div>

确保sections是控件的$ scope中的变量，这是HTML的一部分。

对于Angular JS中的每个循环

2 个答案: