我就是无法让它发挥作用。简化一切并将其放在小提琴中:http://jsfiddle.net/svdoever/94aQH/1/ http://jsfiddle.net/svdoever/94aQH/1/.
我想渲染一本书的分层章节,其中包含段落,段落可以包含子段落。
Code:
angular.module("myApp", []).controller("TreeController", ['$scope', function($scope) {
$scope.vm = {};
$scope.vm.chapter = {
"Id": "N7313",
"Title": "1 Chapter1",
"Content": "<p>Contents1</p>",
"Paragraphs": [
{
"Id": "N1.1",
"Title": "1.1 Paragraph1.1",
"Content": "<p>Content2</p>",
"Paragraphs": [
{
"Id": "N1.1.1",
"Title": "1.1.1 Paragraph1.1.1",
"Content": "<p>ContentA</p>",
"Paragraphs": []
},
{
"Id": "N1.1.2",
"Title": "1.1.2 Paragraph1.1.2",
"Content": "<p>ContentB.</p>",
"Paragraphs": []
}
]
},
{
"Id": "N1.2",
"Title": "1.2 Paragraph1.2",
"Content": "<p>Content3.</p>",
"Paragraphs": []
}
]
};
}]);
和 HTML:
<div ng-app="Application" ng-controller="TreeController">
<script id="paragraphTmpl.html" type="text/ng-template">
<a class="anchor" ng-attr-id="data.Id"></a>
<h4 ng-bind="data.Title" />
<div class="paragraph-text" ng-bind-html="data.Content"></div>
<!-- Want to loose the div in the repeat as well -->
<div ng-repeat="paragraph in data.Paragraphs" ng-include="paragraphTmpl.html"></div>
</script>
<div class="bookchapter">
<a class="anchor" ng-attr-id="vm.chapter.Id"></a>
<h3 ng-bind="vm.chapter.Title" />
<div class="chapter-text" ng-bind-html="vm.chapter.Content"/>
<div ng-repeat="paragraph in vm.chapter.Paragraphs" ng-include="paragraphTmpl.html"/>
</div>
</div>
我也不希望按照评论中指定的方式在重复中呈现 div。我知道如何使用淘汰赛来做到这一点,但找不到 AngularJS 的它。
如有帮助,将不胜感激。