如何使用多子对象值构建 angularjs html 格式

How to frame a angularjs html format with the multi child object values

本文关键字：构建 angularjs html 格式 对象 何使用      更新时间：2023-09-26

My Data(对象数组(： 

$scope.names = [{ "name": "John", "imgsrc": "Smith", "navPath": true, "subValues": [{ "subName": "home" }, {"subName": "home"}]},
{ "name": "Hege", "imgsrc": "Hege1", "navPath": true, "subValues": [{ "subName": "Hege11" }]},
{ "name": "Kai", "imgsrc": "Kai1", "navPath": true, "subValues": [{ "subName": "Kai11" },{"subName": "Kai12"},{"subName": "Kai13"}]}];

我预期的输出 HTML：

<div>
    <a src="Smith.html">John</a>
    <div>
        <span>home</span>
        <span>home</span>
    </div>
</div>
<div>
    <a src="Hege1.html">Hege</a>
    <div>
        <span>Hege11</span>
    </div>
</div>
<div>
    <a src="Kai1.html">Kai</a>
    <div>
        <span>Kai11</span>
        <span>Kai12</span>
        <span>Kai13</span>
    </div>
</div>.

AngularJS中获取此输出的确切编码格式是什么？我是AngularJS的新手，所以那些试图解释的人请给我清晰的理解。提前谢谢。

您可以使用 ngRepeat 在 AngularJS 中显示列表的每个元素。你为列表中的每个项目获取的对象是一个普通的 JavaScript 对象，因此你可以获取字段并对其调用方法。你甚至可以使用一个ngRepeat来代替另一个ngRepeat。

我从这个堆栈溢出中得到了解决方案。在包含 JSON 的 JSON 上使用 ng-repeat(英语：在包含 JSON 的 JSON 上使用 ng-

Json 数据：

{
    "modules":
        [
                {
                   "title":"name of module1",
                   "description":"description of module1",
                   "weeks":[{"id":1, "title":"Week 01"}]
                },
                {
                   "title":"name of module2",
                   "description":"description of module2",
                   "weeks":[{"id":2, "title":"Week 02"},{"id":3,"title":"Week 03"}]
                }
        ]
}

然后你的标记将是：

<table class="table table-bordered" ng-repeat="module in ocw.modules">
<tr>
    <td>
        <h3 class="moduletitle">{{ module.title }}</h3>
        <h4>Description</h4>
        <p>{{ module.description }}</p>
    </td>
</tr>
<tr ng-repeat="week in module.weeks">
    <td>
        {{ week.title }}
    </td>
</tr>
</table>
相关文章：