Question

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

现在在.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/

Answer 2

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

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

现在只需写一下ng-repeat，如

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

分享工作演示以供参考http://jsbin.com/qozaduruti/edit?html,js,output

Answer 3

最好使用对象js结构

加上嵌套的ng-repeat我会很快写一个plunker

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

3 个答案: