lukaszwatroba / v-accordion Goto Github PK

View Code? Open in Web Editor NEW

310.0 310.0 100.0 216 KB

Multi-level accordion component for AngularJS.

Home Page: http://lukaszwatroba.github.io/v-accordion

License: MIT License

JavaScript 81.28% HTML 9.77% CSS 8.96%

v-accordion's People

Contributors

Stargazers

Watchers

Forkers

angularjschile ajitsinghit2 tyderion atardadi luozhihua tigran-harutyunyan adswebwork padic fungiboletus tbalramsingh alelau frank-castro magestik247 dwiargo miladhamzelou nitsorn alexkund legalt pkdevbox baba2157 lama-xperiments sanjeevk121 phenos cloudstr21 diamond0cat zensey zxshinxz helisz clavier-souris decodenai jeton leonab asonni nikhilpatteri jdworschak davinciman007 wangzhaodan rosariovonli rahul-pxl d8ta utkarshsrv vikashvverma raizeta markanthonygapoy vishak-kavalur bhushangahire phamhoangha vadonibabu xadim resangular breebchi abhargava5 kisanhub rnendza tunks darkmerge 2947721120 kelumbadara headerlabsinfotech gurindernarang dalbir shaoboliu 2dmaster nathwest adrianbarwicki coatzel andrewwwolfe singhmohancs websws masihtamsoy marlihams marioum kielikone akasapu2985 efcjunior mrinmoym nishigaba shamimwp zxy920319 arielmcardoso deepakvwagh sharan-explore amangupta17 imashishks wolverston specusa ktthesilentkiller bensezio deathmetalldrummer stvhanna rudineybarbosa leos9 greengain redcastor monikams wp-ng

v-accordion's Issues

Update the npm package to the latest release

Hi,

Thanks for this package.
I'm currently installing it by npm, and the version no. in npm is 1.2.3, and the latest here is 1.2.7. Could you update the npm package or it is better to clone it?

Thanks

multiple issue

Hi,

after update 1.4.1 -> 1.5.1 in my case 'multiple' do not work.

vAccoridion instead of vAccordion in emitEvent

Hi,

Thanks for the great work. I was missing the event part in the angular bootstrap directives and your solution is great. I found out there's a duplicate i in vAccordion:

replace:

eventName = (angular.isDefined(accordionId)) ? accordionId + ':' + eventName : 'vAccoridion:' + eventName;

with:

eventName = (angular.isDefined(accordionId)) ? accordionId + ':' + eventName : 'vAccoridion:' + eventName;

I was wondering if there is any way I could disable the keyboard controls for the v-pane. Currently when I press the space key it expands or collapses the pane. I would like to disable this feature if that's possible.

Error when adding this control to project

Sorry, may be I'm missing something. I'm getting error: Cannot read property 'expanded' of undefined.

Disable toggle if no content

First of all, thanks for the awesome accordion! It is quite straight-forward and no hassle in terms of usage. I have few tabs, but some of them have no content for it. In that scenario, I need to restrict the default functionality of the accordion dash and plus symbol. Can you help me achieve it?

Can't tab into the accordion due to tabindex being set to -1

Hey Lukasz - a heartfelt thank you for releasing this directive set. I'm curious why you're setting tabindex to -1 for the headers of any closed panes. I'm unable to focus on the header and toggle it using my keyboard, unless I've first opened a pane with my mouse, at which point it switches to tabindex=0. What's your logic there?

Control widget on controller initialization

Hello!

Thank you for this great module.

I have a use-case where I need to control initial state of the accordion according to the hash in the URL. I have several panes and each pane has a unique ID. If URL contains this ID I want to expand this tab on view initialization.

After some fiddling, I've came up with this solution:

var paneId = $location.hash();
if (paneId) {
  $scope.$on('$viewContentLoaded', function () {
    var paneIndex = $('#' + paneId).closest('v-pane').index();
    if (paneIndex > 0) {
      var cancelWatch = $scope.$watch('accordion', function (accordion) {
        $timeout(function () {
          accordion.expand(paneIndex);
        }, 0);
        cancelWatch();
      });
    }
  });
}

I have to use $scope.$on('$viewContentLoaded') and $scope.$watch('accordion') because I can't access accordion on scope directly, looks like it takes time to initialize it. This works, but it's very cumbersome approach.

Do you see a better way to approach this problem? Maybe we could somehow improve the design of the directive to address this issue?

I think, if we could give unique names to panes, e.g. my-super-pane than we could tell component to initially expand a pane for us, e.g. <v-accordion expand="my-super-pane">.

What do you think? Thank you!

Close child accordion content when click another parent accordion header.

I have 2 levels accordions. I want to collapse the level 2 content when I click level 1 accordion header.

Is it a way I can do that ? Thank you.

Basically, what I mean is:

When I click Pane 2, the content of SubPane 1 will collapse.

How to disable clicking on an accordion heading?

How to hide the + / - icons?

I need custom buttons (for editing / deleting) in the place of the + / - icons. I did not find a way to hide them, neither in the CSS nor as an attribute option.

how to disable the second and third panels

HI,

My situation is like, i have three panels in the accordion, the first panel button triggers the second panel to open and the button inside the second panel triggers third panel to open. i do not want user to open the panel by clicking the plus icon in the right.

Thanks in advance.

scolling

This directive is saving me a great amount of time, for that I thank you.

However I have only one issue/request that I would normally take the time to figure out and implement myself - but I don't have the time.

Is there a simple way when expanding/collapsing panels to get the scroll position to set to the top of the newly expanded pane?

I've got about 5 panes that are all parts of a large medical form (with lots of form fields) and when one section is finished, I want to collapse it - however the scroll position remains at the bottom of the pane.

I hope that make sense. Thanks!

Destroy content of the pane when collapsed

Hello!

Thank you for this great module, we are using it in one of our projects.

However, I have an issue. I have multiple panes and each pane contains a youtube video player (iframe). If you start to play the video and then collapse the pane, the video will still be playing (you can hear audio). I want to prevent this.

What is the best possible solution to this problem you will recommend? Thank you!

I have the following structure:

<v-pane-header>
    <header>Video #1</header>
</v-pane-header>
<v-pane-content>
    <iframe
        src="https://www.youtube.com/embed/uueMI3F3jzE"
    ></iframe>
</v-pane-content>

I think the great solution would be to do something like this:

<iframe ng-if="thisPane.isOpen()">

disable expand on part of the header

Hi,

I am trying to figure out how to disable the expand/collapse click on a specific place in the v-pane-header
Is it possible?

Thanks

How I change collapse and expand icon?

I want to change collapse and expand icons to arrows. I looked at the CSS and Javascript code and I didn't find it.

The `multiple` attribute can't be found

When putting 'multiple' as attribute on the v-accordion element, and load the html with multiple v-pane's with already 'expanded' as attribute, I get an 'The multiple attribute can't be found' error.
When I omit the 'expanded' attribute, the accordion works and with multiple working. So this attribute is working.

translate3D preventing ng-gallery to go fullscreen

Hey there! Thanks for the hard work 👍
I'm using v-Accordion and inside it, I've put a ng-gallery component. When you click on a image, it is supposed to overlay the full screen. The thing is that it only overlays v-pane-content.
I've asked this on ng-gallery issues and StackOverflow.
Given a comment there and another similar issue posted on ng-gallery wiki, I realized it has something to do with v-Accordion's translate3d CSS property.
Do you know any workaround so I can keep ng-gallery inside an accordion, but allowing it to cover the whole body?
Thanks!

Checkbox in header

I want to add a checkbox in the v-pane-header without toggling the accordion when i click on the checkbox, How can i make that done !

index.js is missing in the root directory

Hi, you should include an index.js in your root directory to let us require your module.
The code that I use is as follows:

require('./dist/v-accordion');
module.exports = 'vAccordion';

Crash on then

I seem to be using latest version of ngAnimate (v1.4.9) but it still crashes on:

$animate.removeClass(iElement, states.expanded)
            .then(function () {

due to missing promise interface

Error with expanded attribute in two pane. How I can expand more than one pane?

Hey, thanks for building this plugin!

I'm trying to do this, but an error occurs:

<v-accordion class="vAccordion--default" multiple>

<!-- Pane One expanded -->
  <v-pane expanded>
    <v-pane-header>
      Pane header #1
    </v-pane-header>

    <v-pane-content>
      Pane content #1
    </v-pane-content>
  </v-pane>

<!-- Pane Two expanded too -->
  <v-pane expanded>
    <v-pane-header>
      Pane header #2
    </v-pane-header>

    <v-pane-content>
      Pane content #2
    </v-pane-content>
  </v-pane>

</v-accordion>

Error: The multiple attribute can't be found at AccordionDirectiveController.ctrl.addPane.

Accordion Title Remains Blue after Closing

Steps to reproduce:

Open accordion item
Click on title to close accordion
Note accordion title remains blue despite no longer being active.

Can be duplicated on demo page.

Example:
http://i.imgur.com/oatZR8q.png

Expand Index confusion

I was using the expand and collapse functions:
<v-accordion class="vAccordion--default" onExpand="selectCable(index)" onCollapse="deselectCable(index)">
and I assumed the "index" in those would be the same as the $index from:
<v-pane ng-repeat="cable in cables">
<md-button ng-disabled="$index === 0" ng-click="swapCable($index,-1)">
I noticed that they would get out of sync when i would remove a cable from "cables". Upon digging into your code I discovered that onExpand gets the index of the pane that was clicked on, not the index of the item in the model that was clicked. These number get out of sync because panes aren't removed from the list of panes, they are just marked "destroyed".

Is there some way to get the actual $index of the selected item in the model instead? You can't just use $index because the onExpand method is declared outside of the ng-repeat

gulp-sass and libsass binding

When I run gulp I get the following error

/home/zensey/IdeaProjects/GitHub/v-accordion/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22
    throw new Error('`libsass` bindings not found. Try reinstalling `node-sass`?');
    ^

Error: `libsass` bindings not found. Try reinstalling `node-sass`?
    at getBinding (/home/zensey/IdeaProjects/GitHub/v-accordion/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22:11)
    at Object.<anonymous> (/home/zensey/IdeaProjects/GitHub/v-accordion/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:188:23)
    at Module._compile (module.js:430:26)
    at Object.Module._extensions..js (module.js:448:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/home/zensey/IdeaProjects/GitHub/v-accordion/node_modules/gulp-sass/index.js:3:17)
    at Module._compile (module.js:430:26)
zensey@pc:~/IdeaProjects/GitHub/v-accordion$ 
zensey@pc:~/IdeaProjects/GitHub/v-accordion/node_modules/node-sass$ npm install -g

My environment:
iojs 3.3.0
ubuntu 15.10
libsass0 3.5.2
libsass-dev 3.5.2

I get the same result in MS Windows with node.js v4.2 on board

How to fix (at least in Ubuntu it helps)

npm uninstall --save-dev gulp-sass
npm install --save-dev gulp-sass@2

Cannot read property 'expanded' of undefined

Im trying to display this:

 <v-accordion class="vAccordion--default" multiple>

 <!-- Pane One expanded -->
  <v-pane expanded>
  <v-pane-header>
    Pane header #1
  </v-pane-header>

  <v-pane-content>
    Pane content #1
  </v-pane-content>
 </v-pane>

 <!-- Pane Two expanded too -->
   <v-pane expanded>
     <v-pane-header>
      Pane header #2
   </v-pane-header>

   <v-pane-content>
      Pane content #2
    </v-pane-content>
   </v-pane>

</v-accordion>

And this message appear: TypeError: Cannot read property 'expanded' of undefined. What can cause it?

Add a way to change the open/closed indicator

Hi,

good job on the menu. I really like using it!
It would be nice if there was a possibility to change the +/- indicatior to a custom one like arrows.

Unfortunately I cannot even find the part of the code which creates and controls the +/- or I would have changed it myself.

Thanks,
Max

Without Ng-Repeat it is not wokring

Could you please give example of how to use without Ng-Repeat.

Look at the below code, id2 and id3 is not expanding.

                    <v-accordion class="vAccordion--default" >

                        <v-pane id="s1" expanded>
                            <v-pane-header>
                                Pane header #1
                            </v-pane-header>

                            <v-pane-content>
                                Pane content #1
                            </v-pane-content>
                        </v-pane>

                        <v-pane id="s2" expanded>
                            <v-pane-header>
                                Pane header #2
                            </v-pane-header>

                            <v-pane-content>
                                Pane content #2
                            </v-pane-content>
                        </v-pane>

                        <v-pane id="s3" expanded>
                            <v-pane-header>
                                Pane header #3
                            </v-pane-header>

                            <v-pane-content>
                                Pane content #3
                            </v-pane-content>
                        </v-pane>
                    </v-accordion>

Nested Panes Without Content

I'm working on a navigation menu using nested panes. The top level works just fine, I have a nested accordion within that. However, I do not have content for the nested layer. Because of this, even though it works perfectly, I'm getting two errors in the console window. One complains that the v-pane-content directive is not present. The other complains that it cannot read 'toggle' of undefined, presumably referring to the missing directive.

It would be nice to be able to add in subpanes that did not require content.

Code:

<v-accordion class="vAccordion--default" id="chapterBox">
    <v-pane ng-repeat="part in chapters" expanded="$first">
        <v-pane-header>
            {{ part.header }}
        </v-pane-header>
        <v-pane-content>
            <v-accordion ng-if="part.subpanes">
                <v-pane ng-repeat="chapter in part.subpanes">
                    <v-pane-header>
                        {{ chapter.header }}
                    </v-pane-header>
                </v-pane>
            </v-accordion>
        </v-pane-content>
    </v-pane>
</v-accordion>

Errors:

Error: The `v-pane-content` directive can't be found
    at link (http://localhost:1337/app/bower_components/v-accordion/dist/v-accordion.js:372:15)
    at http://localhost:1337/app/bower_components/angular/angular.js:8740:44
    at invokeLinkFn (http://localhost:1337/app/bower_components/angular/angular.js:8746:9)
    at nodeLinkFn (http://localhost:1337/app/bower_components/angular/angular.js:8246:11)
    at compositeLinkFn (http://localhost:1337/app/bower_components/angular/angular.js:7637:13)
    at publicLinkFn (http://localhost:1337/app/bower_components/angular/angular.js:7512:30)
    at $get.boundTranscludeFn (http://localhost:1337/app/bower_components/angular/angular.js:7656:16)
    at controllersBoundTransclude (http://localhost:1337/app/bower_components/angular/angular.js:8273:18)
    at ngRepeatAction (http://localhost:1337/app/bower_components/angular/angular.js:27304:15)
    at Object.$watchCollectionAction [as fn] (http://localhost:1337/app/bower_components/angular/angular.js:15618:13) <v-pane ng-repeat="chapter in part.subpanes" class="ng-scope ng-isolate-scope">

TypeError: Cannot read property 'toggle' of undefined
    at PaneDirectiveController.ctrl.toggle (v-accordion.js:466)
    at v-accordion.js:307
    at Scope.$get.Scope.$eval (angular.js:15916)
    at Scope.$get.Scope.$apply (angular.js:16016)
    at HTMLElement.<anonymous> (v-accordion.js:306)
    at HTMLElement.jQuery.event.dispatch (jquery.js:4435)
    at HTMLElement.jQuery.event.add.elemData.handle (jquery.js:4121)

Access the accordion from the controller

I want to access my accordion from the controller (with controllerAs syntax). I've tried with the control attribute of your accordion but I can't make it work.

How could I achieve this ?

Thx for the work 👍

Edit : ok so I managed to do that by passing the "control" object within a function, and it worked. Would be easier if we could directly attach a scope variable in the "control" object. My 2 cents :)

Need accordion declare it in the controller

I need to declare a scope variable in the controller for this accordion. Can I do that?

multi level nesting?

Hello, is it possible to have accordions nested more than one level? I'm trying to create a heirachy 4 levels deep and wanted to know if it was possible.

Thanks.

Content blacked out on expansion in Firefox 42, OSX 10.10.5

Love this accordion but seeing an issue in Firefox 42 on OSX 10.10.5. Not sure if there is a difference in Windows or not but better to be explicit than not.

When expanding content all the text gets a black highlight over top the text making it unreadable. See attached image. This bug is also present viewing the demo page.

Cancel collapse/expand event

I have something like this

<v-accordion class="vAccordion--default" multiple>
    <v-pane ng-repeat="...." expanded="$first">
        <v-pane-header ng-click="vm.onClick($event)">

And in controller

vm.onClick = function(event) {
    event.stopPropagation();
    event.preventDefault();

But this does not work ...

Styling the module with scss ?

I want to change the module:

from blue to green
I want to make the divider more thin.

Unable to auto scroll to top of exapanded content

I'm having some problems trying to get an auto scroll to top once a content panel is opened. Is there any work around for this?

Typos in README.md

Hello Lukasz,
you have two significant typos in you README in the lines 21 and 23
accoridon instead of accordion

control directive is not working for inner v-accordions

I have four levels of v-accordion, and I want to close all accordions when clicked on any levels. Basically everything should be collapsed when clicked on any item. Now I'm using collapseAll() function for the first accordion, but for inner accordions, it is not working. Can anyone help me on this? Thanks in advance.

No then in $animate.addClass or removeClass

Not sure which version the promises were introduced, but latest stable seems not to work. Could we get it working automatically by detecting the older version and using a pollyfill for those methods?

Pane Index always 2 ($parent.$index) in collapse Callback

I have been using the v-accordion angularjs component. I have experiencing a issue while collapse the node.

I have 5 accordion panes. I would like to collapse the accordion panes based on some condition. In my case, always 3rd accordion pane is not able to collapsed ($index = 2 always in $parent.$index)
Any idea where to fix this?

Customizable？

Is there anyway to customize? Like color theme, animation, and etc.. ? Thank you!

Disable Pane

disable pane

Minified version of 1.5 produce an error

When we use the minified version of v1.5 - we got an error.
The minified version of 1.4.2 works fine; the non-minified version of 1.5 also works,
We are using angular v1.4.9 & angular-animate 1.4.0. (it doesn't work also on angular 1.4.7).

The error:
Error: [$injector:unpr] Unknown provider: nProvider <- n <- .is-expanded-animation
http://errors.angularjs.org/1.4.9/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20.is-expanded-animation
at angular.js:68
at angular.js:4346
at Object.getService as get
at angular.js:4351
at getService (angular.js:4494)
at Object.invoke (angular.js:4526)
at Object.enforcedReturnValue as $get
at Object.invoke (angular.js:4535)
at angular.js:4352
at Object.getService as get

<v-pane-header> in an Angular template

I'm trying to use v-accordion with AngularJS, defining the <v-pane-header> and <v-pane-content> tags in an Angular template, which template is included into the <v-pane> using <div ng-include="template.html">.

I'm getting the error: The 'v-pane-header' directive can't be found, I am guessing because the <v-pane-header> is not a direct child of <v-pane>. Does that sound like the correct analysis, or might there be another cause?

Is there any workaround? I am using the template recursively to display a recursive hierarchy, so eliminating the template is not an option.

onExpand index starts from 1

Hello,
Thank you for your plugin, it works great within angular-material.
The content if my accordion uses a ng-repeat and I use the index to retrieve the selected element. I had to understand that the index starts from 1 instead of 0. It could be mentioned in the documentation, or it could start from 0 :-)

 $scope.expandCallback = function(index) {
     var selectedDataset = $scope.datasets[index-1];
     ...
};

Pane does not open

I am using a dnd-list directive within the content , but somehow the pane never opens , The pane comes to expanded state but max-height is set to zero . Below is the markup .

      <v-accordion class="vAccordion--default" multiple>
                <v-pane ng-repeat="(key,items) in list1.items|excludeArray:settings.models.lists['B'].items|groupBy:'parent'">
                  <v-pane-header>
                    <strong>{{key}} {{$pane}}</strong>
                  </v-pane-header>
                  <v-pane-content>
                    <ul dnd-list="list1">
                      <li ng-repeat = "subitem in items|filter:settings.search_text"
                      dnd-draggable="subitem"
                      dnd-moved="settings.movedItem(event,$index,item,list1)"
                      dnd-effect-allowed="move"
                      dnd-selected="settings.models.selected = {item:subitem,list:list1,listName:'A'}"
                      ng-class="{'selected': settings.models.selected.item === subitem}"
                      ng-dblclick="settings.moveSelectedRight(settings.models.selected)">
                      {{subitem.column_name}}
                    </li>
                  </ul>
              </v-pane-content>
              </v-pane>
            </v-accordion>

Please help .

Error: The `multiple` attribute can't be found

I'm receiving this error when I have more than one 'expanded' on v-pane.

<v-accordion class="vAccordion--default" multiple control="accordion">
            <!-- add expanded attribute to open the section -->
            <v-pane expanded>
              <v-pane-header>
                <label><b><a><span class="glyphicon glyphicon-file"></span> Step 1 - Pet Information / Select a Pet - {{pet.petname}}</a></b></label>
              </v-pane-header>

              <v-pane-content>
                <div class="col-sm-12 table-responsive">
                  <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                      <tr>
                        <td>  
                          <h2><a ui-sref="petMod({userid: {{userid}}, petid: {{petid}}})" target="_blank">{{pet.petname}}</a></h2>

                          <img class="img-responsive" ng-src="./assets/img/petpics/{{pet.pathtopic}}" ng-if="pet.pathtopic !== null" width="240">
                          <img class="img-responsive" src="./assets/img/default_dog.jpg" ng-if="pet.pathtopic === null" width="240">

                          <label>
                            <h3>{{pet.breedname}}</h3><br>
                            <b>Description:</b> {{pet.petdesc}}<br>
                            <b>Gender / Status:</b> {{pet.gender}} / {{pet.neuterstate}}<br>
                            <b>Weight:</b> {{pet.weight | number}}<br>
                            <b>Birthdate:</b> {{pet.birthdate | date}}<br><br>
                            <b>Owner:</b> <a ui-sref="ownerMod({userid: {{userid}}})" target="_blank">{{owner.firstname}} {{owner.lastname}}</a><br>
                            <b>Contact Info:</b> <br>(h) <a href="tel:{{owner.homephone}}">{{owner.homephone | tel}}</a> <br>(e) <a ui-sref="emailOwner({userid: {{userid}}})">E-mail</a><br>
                          </label>
                        </td>
                        <td>
                          <label>
                            <b>Pet Notes:</b></br>
                            <div ng-if="pet.notes <= 0 || pet.notes === null">
                              <i>No Available Notes</i></br></br>
                            </div>
                          </label>
                            <div ng-repeat="note in pet.notes">
                              <a style="display:block; background-color: {{note.bgcolor}}; color: {{note.fontcolor}}" ng-bind="note.notetype + ' - ' + formatDate(note.notedate) + ': ' + note.note"></a>
                            </div>
                          <br>

                          <label>
                            <b>Advisories:</b></br>
                            <div ng-if="pet.adv <= 0 || pet.adv === null">
                              <i>No Advisories</i></br>
                            </div>
                            <div ng-repeat="adv in pet.adv">
                              {{adv.trait}}
                            </div>
                          </label>
                          <br><br>
                          <label><b>Associated Pets (Select checkbox to add additional appointment):</b><br></label>
                          <div class="col-sm-12 table-responsive">
                            <table class="table table-striped table-condensed">
                              <tbody>
                                <tr>
                                  <td>
                                    <input type="checkbox" name="petids[]" value="{{pet.petid}}" checked></br>
                                  </td>
                                  <td>
                                    <label><b>{{pet.petname}}</b> ({{pet.breedname}})   weight: {{pet.weight | number}}</label>
                                  </td>
                                </tr>
                                <tr ng-repeat="assocPet in assocPets" ng-if="assocPet.petid !== pet.petid">
                                  <td>
                                    <input type="checkbox" name="petids[]" value="{{assocPet.petid}}" ></br>
                                  </td>
                                  <td>
                                    <label><b>{{assocPet.petname}}</b> ({{assocPet.breedname}})   weight: {{assocPet.weight | number}}</label>
                                  </td>
                                </tr>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </v-pane-content>
            </v-pane>

            <v-pane expanded>
              <v-pane-header>
                <label><b><a><span class="glyphicon glyphicon-th-list"></span> Step 2 - Select the Services</a></b></label>
              </v-pane-header>

              <v-pane-content>
                <div class="col-sm-12 table-responsive">
                  <table class="table table-striped table-bordered table-condensed">
                    <tbody>
                      <tr>
                        <td class="col-sm-3"> 
                          <div class="form-group-sm col-sm-12">
                            <label for="stid">Select a Service Type</label>
                            <select class="form-control" name="stid" ng-options="type.servicetype for type in serviceTypes track by type.stid" ng-model="selectedType" ng-change="populateProducts(selectedType.stid)" data-validation="required stid" data-validation-help="Select a service type">
                              <option value="" selected="selected">Select a Service Type</option>
                            </select>
                          </div>
                        </td>
                        <td class="col-sm-9">
                          <div class="col-sm-9">
                            <h2>Available Services</h2>
                          </div>
                          <div class="col-sm-3 form-group-sm">
                            <label>Product Filter:</label> <input type="text" class="form-control" ng-model="searchField">
                            <a class="clear" ng-click="searchField = ''">Clear</a>
                          </div>

                          <div class="form-group col-sm-12 text-center" ng-if="products.length <= 0 || products.length === undefined">
                            <label>There are no products or services for sale with the selected type. Select a Service Type from the left to populate possible products and services.</label>
                          </div>
                          <div class="col-sm-12 table-responsive" ng-if="products.length > 0">
                            <table class="table table-striped table-bordered table-hover table-condensed">
                              <thead>
                                <tr>
                                  <th><label>Product Name</label></th>
                                  <th><label>SKU</label></th>
                                  <th><label>Product Type</label></th>
                                  <th><label>Qty</label></th>
                                  <th><label>Price</label></th>
                                  <th><label>Add</label></th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr ng-repeat="product in products | filter:searchField">
                                  <td><label>{{product.servicename}}</label></td>
                                  <td><label>{{product.sku}}</label></td>
                                  <td><label>{{selectedType.servicetype}}</label></td>
                                  <td><div class="form-group-sm"><input type="text" class="form-control" name="qty_{{product.serviceid}}" value="1" size="3"></div></td>
                                  <td><div class="form-group-sm"><input type="text" class="form-control" name="price_{{product.serviceid}}" value="{{product.price}}" size="3"></div>
                                  </td>
                                  <td><input type="checkbox" name="check_{{product.serviceid}}" value="{{product.serviceid}}"></td>
                                </tr>     

                              </tbody>
                            </table>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </v-pane-content>
            </v-pane>
          </v-accordion>

$scope.expandCb is not a function

Hello,
I have updated angular 1.4.0 and i get an error :

$scope.expandCb is not a function at AccordionDirectiveController.ctrl.addPane

Thx for your help.

Hi, how can i change + & - sign with up and down arrow?

Your v-accordion is awesome thanks !

Typo in ReadMe explainer

In various places in your ReadMe file (instructions) you have class="vAccordion--dafault"

but it should be class="vAccordion--default"