javascript - 需要帮助在 AngularJS 中编辑一些文本 - 简单的段落嵌套

Question

我是 AngularJS 新手，我正在编辑一个已经存在的网站。

假设我有一个如下所述的列表

Activities
 . Dancing
 . Singing
 . Sports
 . Volleyball
 . Tennis

我可以在网站上很好地展示这一点。 但是，我希望“ Volley ”和“网球”嵌套在“体育”下方并缩进如下:

Activities
. Dancing
. Singing
. Sports
    . Volleyball
    . Tennis

这是我的代码。

在 .html 中我有

<div class="basic-page__section-header" ng-if="section.sectionHeader">{{section.sectionHeader }}</div>
     <pre>
        <div class="basic-page__section-list--undecorated" ng-if="section.sectionUndecoratedList">
            <ul class="section-list section-list--undecorated">
                <li ng-repeat="listItem in section.sectionUndecoratedList">{{ listItem }}</li>
            </ul>
        </div>
    </pre>
</div>

现在，在 .js 文件中，我按以下方式使用sectionUndecoratedList:

sectionHeader: "Activities:",
sectionUndecoratedList: [
"Dancing",
"Singing",
"Sports",
"Volleyball",
"Tennis",

这就是我遇到问题的地方。我尝试了很多东西，但我不能像这样将运动嵌套在运动场下:

体育

. Volleyball

. Tennis

对于某些人来说这可能看起来很容易，但我一直在努力解决这个问题，所以我们将不胜感激。

Answer 1

像这样改变你的对象结构。

$scope.sectionUndecoratedList = [
{"activity":"Dancing"},
{"activity":"Singing"},
{"activity":"Sports", "subactivity":["vollyBall", 
"Tennis"]}]

并按以下方式从 html 访问它

`<ul>
<li ng-repeat="listItem in sectionUndecoratedList">
<div>{{ listItem.activity }}</div>
<ul ng-if="listItem.hasOwnProperty('subactivity')"
ng-repeat="l in listItem.subactivity"><li>{{ l }}</li></ul>
</li>
</ul>`

分享 JsFiddle 链接供您引用 https://jsfiddle.net/Prasanna15/8n5dwpab/