Angularjs converting code to directive or ng-repeat

Question

I am currently trying to convert an json response into jquery accordion. 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. I created a Plunker to help visualize this issue.

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.

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.

Here is the 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 :

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

I am currently working inside of an iframe and I must keep the integrate of the html structure in order to carry the outer frames css. I would like to use a directive to implement this instead of brute code. — Sari Rahal
– Sari Rahal, Commented Nov 11, 2015 at 14:53
by link above you can see angular directive for accordion. So i not quite understand what you mean in your comment? — Grundy
– Grundy, Commented Nov 11, 2015 at 14:55
@Grundy: that accordion doesn't carry the html correctly, so it will break the CSS — Sari Rahal
– Sari Rahal, Commented Nov 11, 2015 at 17:29

Grundy · Accepted Answer · 2015-11-11 18:59:40Z

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>

WORKING PLUNKR

MarvinDeLaCruz · Accepted Answer · 2015-11-11 18:43:45Z

1

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:

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

edited Nov 11, 2015 at 18:43

answered Nov 11, 2015 at 18:30

MarvinDeLaCruz

515 bronze badges

2 Comments

Sari Rahal Over a year ago

So close to perfect. How do I limit to only one opened at a single time.

MarvinDeLaCruz Over a year ago

Edited so it uses the h3 as start point and the div (body of the accordion) to mark the ending point, see: plnkr.co/edit/XuRiYfKo5NbvqQaTPOlC?p=preview

Collectives™ on Stack Overflow

Angularjs converting code to directive or ng-repeat

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related