I'm using Angular v1.2.0rc1 and Angular-UI Bootstrap.

[edit] What I want is a load-on-demand with cache while using an accordeon.

I'm using an accordion group from here. With some backend requeriments: I would like to load the contents for inside of the accordion only when the accordion is opened (clicked).

Then, I want that response be cached so you can open/close as many as you want and not overload the server.

I tried using ng-click on the heading but it gets override via the AngularUI Bootstrap.

Is there a way to solve this?

I'm using Angular v1.2.0rc1 and Angular-UI Bootstrap.

[edit] What I want is a load-on-demand with cache while using an accordeon.

I'm using an accordion group from here. With some backend requeriments: I would like to load the contents for inside of the accordion only when the accordion is opened (clicked).

Then, I want that response be cached so you can open/close as many as you want and not overload the server.

I tried using ng-click on the heading but it gets override via the AngularUI Bootstrap.

Is there a way to solve this?

• javascript
• angularjs
• angular-ui

Share Follow edited Oct 8, 2013 at 18:24 genuinefafa asked Oct 8, 2013 at 14:57 genuinefafagenuinefafa 71311 gold badge66 silver badges2121 bronze badges 2

• Are you taking about loading html content of tab on demand? – Chandermani Commented Oct 8, 2013 at 15:25
• yes, that's what i want load on demand while using an accordeon! :) (i just add that ment in the description of the question) – genuinefafa Commented Oct 8, 2013 at 18:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can use the accordion heading tag to catch the ng-click

<div accordion ng-controller="AccordionCtrl">
  <div accordion-group ng-repeat="group in groups">
    <div accordion-heading >
      <div ng-click='loadGroup(group)'>
        {{group.title}}        
      </div>
    </div>
    {{group.loaded}}
  </div>
</div>  

with this controllers

var AccordionMenuCtrl = ['$scope', '$http' function ($scope, $http) {
  $scope.groups = [
    {
      url: 'http://whatever',
      title: 'whatever'
    },
    {
      url: 'http://whatever_else',
      title: 'whatever else'
    }
  ]

  $scope.loadGroup = function (group) {
    $http.get(group.url).success(function (data) {
      group.loaded = data
    });
  }
}];