[英]Angularjs converting code to directive or ng-repeat
I am currently trying to convert an json response into jquery accordion. 我目前正在尝试将json响应转换为jquery手风琴。 I have got the code working, and would like to clean up my code to make more sense. 我已经使代码工作了,并且想整理我的代码以使其更有意义。 Currently I hard codded to get it to work, from there I tried an ng-repeat and I couldn't get that to work b/c it created a around each collapsible div and resulted in weird results, my next guess would be to turn it into a directive and I am not sure how to do that without having the same results as the ng-repeat. 目前,我辛苦地努力使它工作,从那里尝试了ng-repeat,但我无法使其工作b / c,它在每个可折叠的div周围创建了一个,并导致了奇怪的结果,我的下一个猜测是将其转换为指令,并且在不具有与ng-repeat相同的结果的情况下,我不确定该怎么做。 I created a Plunker to help visualize this issue. 我创建了一个Plunker来帮助可视化此问题。
http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview
KEY NOTE : The structure of the html can not change b/c of inherited CSS that cannot be changed. 关键说明:html的结构无法更改无法更改的继承CSS的b / c。
Any help or point in the right direction would be nice. 任何帮助或指向正确方向的事情都将是很好的。 At this point I would accept a proper working ng-repeat, or convert it to a directive that works. 在这一点上,我将接受适当的工作ng-repeat,或将其转换为有效的指令。
Here is the JSON 这是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"}]}];
Proper working code: 正确的工作代码:
<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 : 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>
You can use ng-repeat-start / ng-repeat-end to make the loop in the header, then iterate for the title in h3 and the body, no need for the extra div in the ng-repeat in the div like this: 您可以使用ng-repeat-start / ng-repeat-end在标头中进行循环,然后在h3和主体中迭代标题,而在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>
You can a bit change your directive: 您可以稍微更改一下指令:
.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
});
});
}
}
})
and move to template all structure 并移动到所有结构的模板
<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>
at last use this as simple 最后使用这个简单
<document-types></document-types>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.