javascript - Angular JS 中的 For Each 循环

标签 javascript angularjs loops foreach

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

Category 1
Item 1
Item 2
Etc

Category 2
Item 1
Item 2
Etc

如何创建循环来获取类别标题,然后获取该类别中的项目?

在代码中我想这样显示它:

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

最佳答案

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

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

您可以在模板中使用 ng-repeat 来表示这一点通过循环 categories 数组进行循环,并在每个循环内,对该类别中的 items 数组执行嵌套循环:

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

关于javascript - Angular JS 中的 For Each 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40076107/

相关文章:

java - 如何在字符串的开头和结尾添加字符?

c++ - `std::swap` 在字符串操作中没有按预期工作

javascript - Google 日历返回无效的 json 文件

javascript - 注销后刷新/重新加载页面

JavaScript "if"语句无法运行

css - tbody 边框呈现问题

javascript - 使用 ng-repeat 创建 DOM 属性

css - Sass 循环 @mixin 和 @include

javascript - 包含 ng-template 的指令中的 Angular 嵌入(通用 Confirm Modal)

javascript - 带 var 的 For 循环