我目前正在尝试将json响应转换为jquery手风琴。我已经让代码工作了，并希望清理我的代码以使其更有意义。目前我很难将其用于工作，从那里我尝试了一个ng-repeat而我无法工作b / c它创建了一个围绕每个可折叠的div并导致奇怪的结果，我的下一个猜测将是把它变成一个指令，我不知道如何在没有与ng-repeat相同的结果的情况下做到这一点。我创建了一个Plunker来帮助可视化这个问题。
http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview
KEY注意：html的结构不能改变无法更改的继承CSS的b / c。
任何正确方向的帮助或观点都会很好。在这一点上，我会接受一个正确的工作ng重复，或将其转换为有效的指令。
这是JSON
$scope.documentTypes= [{"name":"name1","links": [{"rel":"self","href":"url1"}]},
{"name":"name2","links":[{"rel":"self","href":"url2"}]},
{"name":"name3","links":[{"rel":"self","href":"url3"}]},
{"name":"name4","links":[{"rel":"self","href":"url4"}]}];
正确的工作代码：
<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist">
<h3 tabindex="0"
ng-click="setVariable(documentTypes[0])"
class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
role="tab" aria-selected="false"
aria-controls="ui-accordion-accordion-panel-0"><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{documentTypes[0].name}}
</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
role="tabpanel" aria-expanded="false" aria-hidden="true"
aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
<p style="height:150px;">
{{documentTypes[0]}}
</p>
</div>
<h3 tabindex="0"
ng-click="setVariable(documentTypes[2])"
class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
role="tab" aria-selected="false"
aria-controls="ui-accordion-accordion-panel-0"><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{documentTypes[1].name}}
</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
role="tabpanel" aria-expanded="false" aria-hidden="true"
aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
<p style="height:215px;">
{{documentTypes[1]}}
</p>
</div>
<h3 tabindex="0"
ng-click="setVariable(documentTypes[3])"
class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
role="tab" aria-selected="false"
aria-controls="ui-accordion-accordion-panel-0"><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{documentTypes[2].name}}
</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
role="tabpanel" aria-expanded="false" aria-hidden="true"
aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
<p style="height:215px;">
{{documentTypes[2]}}
</p>
</div>
<h3 tabindex="0"
ng-click="setVariable(documentTypes[0])"
class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
role="tab" aria-selected="false"
aria-controls="ui-accordion-accordion-panel-0"><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{documentTypes[3].name}}
</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
<p style="height:215px;">
{{documentTypes[3]}}
</p>
</div>
</div>
ng-repeat：
<h1>Trying NG-Repeat</h1>
<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist">
<div ng-repeat="docs in documentTypes">
<h3 tabindex="0"
ng-click="setVariable(docs)"
class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
role="tab" aria-selected="false"
aria-controls="ui-accordion-accordion-panel-0"><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{docs.name}}
</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
<p style="height:215px;">
{{docs}}
</p>
</div>
</div>
</div>
答案 0 :(得分：1)
你可以使用ng-repeat-start / ng-repeat-end在标题中创建循环，然后在h3和body中迭代标题，不需要div中ng-repeat中的额外div像这样：
<h1>Trying NG-Repeat</h1>
<div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist" >
<h3 ng-repeat-start="docs in documentTypes" tabindex="0"
ng-click="setVariable(docs)"
class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
role="tab" aria-selected="false"
aria-controls="ui-accordion-accordion-panel-0"><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span
class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{docs.name}}
</a>
</h3>
<div ng-repeat-end class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;">
<p style="height:215px;">
{{docs}}
</p>
</div>
</div>
答案 1 :(得分：1)
您可以稍微改变您的指令：
.directive('documentTypes', function (){
return {
restrict: 'E',
replace: true, //html would be replaced to template
templateUrl: 'document_type.html',
link:function(scope,elem){
setTimeout(function(){
elem.accordion({ //you not need $(elem) because elem already jQuery element
active: true,
autoHeight: true,
navigation: true,
collapsible: true
});
});
}
}
})
并移至模板所有结构
<div class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 ng-repeat-start="doc in documentTypes" tabindex="0" ng-click="setVariable(doc)" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" role="tab" aria-selected="false" aria-controls="ui-accordion-accordion-panel-0">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
<a href="#" style="font-size: .8em;">
{{doc.name}}
</a>
</h3>
<div ng-repeat-end class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex" role="tabpanel" aria-expanded="false" aria-hidden="true" aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;">
<p style="height:150px;">
{{doc}}
</p>
</div>
</div>
最后将其用作简单的
<document-types></document-types>