Angular 1.5.8 Directive for Bootstrap 4 Accordion

[howard taylor]

Angular includes a javascript library for a Grid Directive (ui-grid.js) and it is a time saver but there isn’t one for an Accordion that contains a table. I see examples in various places where people “claim” their code is a Directive but their code is just a Bootstrap Accordion with a table inside it. In other words there is no javascript that reads a table definition and renders the table with a record in it in each Accordion line item.

In addition I have searched 3rd party vendors and none of them I have seen offer this kind of Directive.

This makes me think this cannot be easily done and is not worth the time and effort or it just can’t be done.

Does any one have any input on this? I have a rather difficult person breathing down my neck over this and they cannot accept that perhaps this is not the way to go or that it is not possible without expending many hours of development for little bang.

BTW - this shop is in the stone age using Angular 1.5.8 in a .net environment.

Thanks

[Tito]

hey Howard. 

Can you post your code somewhere out there like plunkr ? I have been able to do this if I understand your question.

[howard taylor]

<div class="accordion">

<div ng-repeat="record in vm.records.Data">

     <table>

          <tbody>

               <tr>

                    <td>Last Updated</td>

                    <td>{{ record.UpdatedDtTm }}</td>

               </tr>

               <tr>

                  ...........   more rows, 1 row for each field

               </tr>

     </table>

</div

<div>

This guy here thinks the html for the table can be defined as:

<div class="accordion">

<accordionDIRECTIVE>

    ..........  with the table code pieced together with javascript as the ui-grid.js file does the Bootstrap grid

</accordionDIRECTIVE>

<div>

then the columns defined in javascript:

columns:[     //define the table columns

{title:"Last Updated", field:"UpdatedDtTm"},

         ............. etc

],

I can find no code any where that does this type of thing.

If you have done this and can show me it would be swift!

I hope this is clear :)

Thanks.

[Tito]

what does your file structure look like

I have a directive file virts.directive.js in it I have the following

(function () {

'use strict';

angular

.module('app.myvms')

.directive('myHostsets', function () {

return {

restrict: 'EA',

templateUrl: 'app/myvms/myvms.myhostsets.html'

}

})

.directive('myVms', function () {

return {

restrict: 'EA',

templateUrl: 'app/myvms/myvms.myvms.html'

}

})

})();

Then in myvms.myhostsets.html you can embed your grid. The guy is actually right :)