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

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

现在，在js文件我用sectionUndecoratedList以下列方式：

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

这是我的问题。我已经尝试了一堆东西，但我不能嵌套在体育领域的运动是这样的：

体育

. Volleyball 

. Tennis

这似乎容易一些，但我一直在为此而努力，所以帮助将不胜感激。

来源

2017-09-06 stacknoob

请使用[角递归模板（http://benfoster.io/blog/ angularjs-recursive-templates）来构建这个，问题中显示的简单数组不能这样做。 –

其更好地使用对象的js结构

加一个嵌套的NG-再说一遍，我会写一个plunker很快

来源

2017-09-06 06:38:18

谢谢你们。说得通。一名运动员会很有帮助！ – stacknoob

更改对象结构是这样的。

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

来源

2017-09-06 07:13:05

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

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

现在只写了NG-重复类似

<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

来源

2017-09-06 10:46:01

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

回答

相关问题