需要幫助編輯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中的一些文本 - 簡單的嵌套段落

回答

相關問題