Question

这是我的第一次发贴，我对AngularJs也很陌生，对JavaScript来说也有些新。我希望我能提供足够的信息。我有一个包含对象数组的数组[[{}，{}，{}]，[{}，{}，{}]，[{}，{}，{}]]。有没有一种方法可以使用AngularJs遍历此过程并输出类似于以下内容的内容？

组标题1

01项目标题1：项目说明
02项目标题2：项目说明

组标题2

03项目标题1：项目说明
04项目标题2：项目说明

==============

$scope.groups_array = [
    [
        {
            "id": "01 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        },
        {
            "id": "02 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        }
    ],
    [
        {
            "id": "03 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        },
        {
            "id": "04 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        }
    ]
]

$scope.group_title = ["Group Title 1", "Group Title 2"];

<div>
    <div ng-repeat="title in group_title">
        <h1>{{title}}</h1>
        <ul>
            <li ng-repeat="item in groups_array">
              {{item.id + ' ' + item[''][0]}}: {{item[''][1]}}
            </li>
        </ul>
    </div>
</div>

我得到的输出只是一个：的列表，控制台中没有错误。

对象数组本身来自包含所有对象的主数组，我尝试按组标题将它们分为数组。我不确定这是否是最佳解决方案。

Answer 1

您应该尝试的是将groups_array变成类似对象

> mpicc -v -o main ./main.c
Apple LLVM version 9.0.0 (clang-900.0.39.2)
Target: x86_64-apple-darwin17.7.0
Thread model: posix
InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin
 "/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang" -cc1 -triple x86_64-apple-macosx10.13.0 -Wdeprecated-objc-isa-usage -Werror=deprecated-objc-isa-usage -emit-obj -mrelax-all -disable-free -disable-llvm-verifier -discard-value-names -main-file-name main.c -mrelocation-model pic -pic-level 2 -mthread-model posix -mdisable-fp-elim -fno-strict-return -masm-verbose -munwind-tables -target-cpu penryn -target-linker-version 305 -v -dwarf-column-info -debugger-tuning=lldb -resource-dir /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/clang/9.0.0 -I ... -fdebug-compilation-dir /Users/... -ferror-limit 19 -fmessage-length 173 -stack-protector 1 -fblocks -fobjc-runtime=macosx-10.13.0 -fencode-extended-block-signature -fmax-type-align=16 -fdiagnostics-show-option -fcolor-diagnostics -o /var/folders/cx/76hd7pcs41g_vdj4qjfx0d4h0000gn/T/main-29e74d.o -x c ./main.c
clang -cc1 version 9.0.0 (clang-900.0.39.2) default target x86_64-apple-darwin17.7.0
...
...

然后在您的Angular代码段中：

$scope.groups_array = {
    "Group Title 1": [
        {
            "id": "01 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        },
        {
            "id": "02 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "A",
            "title": "Group Title 1"
        }
    ],
    "Group Title 2": [
        {
            "id": "03 ",
            "": [
                "Item Title 1",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        },
        {
            "id": "04 ",
            "": [
                "Item Title 2",
                "Item description"
            ],
            "group_id": "B",
            "title": "Group Title 2"
        }
    ]
}

Answer 2

嵌套的ng-repeat需要选择正确的组进行迭代：

<div>
    <div ng-repeat="title in group_title">
        <h1>{{title}}</h1>
        <ul>
            ̶<̶l̶i̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶i̶t̶e̶m̶ ̶i̶n̶ ̶g̶r̶o̶u̶p̶s̶_̶a̶r̶r̶a̶y̶"̶>̶
            <li ng-repeat="item in groups_array[$index]">
              {{item.id + ' ' + item[''][0]}}: {{item[''][1]}}
            </li>
        </ul>
    </div>
</div>

这假设group_title数组中标题的顺序与groups_array中组的顺序相匹配。

遍历包含对象的数组的数组

2 个答案: