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

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

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

Activities
 . Dancing
 . Singing
 . Sports
 . Volleyball
 . Tennis

我可以在网站上很好地展示这一点。 但是，我希望“排球”和“网球”嵌套在“运动”下面，并缩进如下：

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>

这就是我的问题所在。我已经尝试了很多东西，但我不能像这样把运动放在运动场下面：

运动

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

---

这对一些人来说似乎很容易，但我一直在努力解决这个问题，所以我非常感谢你的帮助

最好使用object js结构

---

再加上一个嵌套的ng repeat，我将很快编写一个plunker

最好使用object js结构

---

再加上一个嵌套的ng repeat，我将很快编写一个Plunk

像这样更改对象结构

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

并通过以下方式从html访问它

    $scope.sectionHeader = 'Activities';
    $scope.sectionUndecoratedList = [
      {'activites':'Dancing'},
      {'activites':'Singing'},
      {'activites':'Sports', children:['Volleyball','Tennis']}
    ]

`


{{listItem.activity}}
{{l}

`

共享JSFIDLE链接供您参考

---

像这样更改对象结构

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

并通过以下方式从html访问它

    $scope.sectionHeader = 'Activities';
    $scope.sectionUndecoratedList = [
      {'activites':'Dancing'},
      {'activites':'Singing'},
      {'activites':'Sports', children:['Volleyball','Tennis']}
    ]

`


{{listItem.activity}}
{{l}

`

共享JSFIDLE链接供您参考

---

您只需更改存储在控制器中的数据结构即可。您必须创建一个对象数组，如下所示

<div>{{sectionHeader}}</div>
  <ul>
    <li 
        ng-repeat="(key,header) in sectionUndecoratedList">
      <div>
        {{header.activites}}
      </div>
      <ul ng-if="header.children">
        <li ng-repeat="h in header.children">{{h}}</li>
      </ul>
    </li>
  </ul>
</div>

现在只需写下重复的内容

{{sectionHeader}


{{header.activites}

{{h}

---

共享工作演示供您参考

您只需更改存储在控制器中的数据结构即可。您必须创建一个对象数组，如下所示

<div>{{sectionHeader}}</div>
  <ul>
    <li 
        ng-repeat="(key,header) in sectionUndecoratedList">
      <div>
        {{header.activites}}
      </div>
      <ul ng-if="header.children">
        <li ng-repeat="h in header.children">{{h}}</li>
      </ul>
    </li>
  </ul>
</div>

现在只需写下重复的内容

{{sectionHeader}


{{header.activites}

{{h}

---

共享工作演示供您参考

请使用来构建此功能，问题中显示的简单阵列无法实现此功能。请使用来构建此功能，问题中显示的简单阵列无法实现此功能。谢谢大家。有道理。一个劫掠者会很有帮助的！谢谢你们。有道理。一个劫掠者会很有帮助的！