Load from $http.get on accordion-group open using AngularJS

Question

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?

yes, that's what i want load on demand while using an accordeon! :) (i just add that comment in the description of the question) — genuinefafa
– genuinefafa, Commented Oct 8, 2013 at 18:19

IxDay · Accepted Answer · 2013-11-05 16:48:52Z

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
    });
  }
}];

edited Nov 5, 2013 at 16:48

answered Nov 5, 2013 at 16:22

IxDay

3,7072 gold badges25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

genuinefafa Over a year ago

sorry for the delay, i didn't get any notification of your response! :( // interesting way of solving the issue BTW

Krishna shidnekoppa Over a year ago

good solution. but I found an issue. when closing upon clicking the header, the $scope.loadGroup is being called. how to stop that?

genuinefafa Over a year ago

@Krishnashidnekoppa you should add logic in the loadGroup function, ngClick will always call when clicked. :-/

Collectives™ on Stack Overflow

Load from $http.get on accordion-group open using AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related