Retrieve data using $http.get when an accordion group is expanded in AngularJS

Question

Retrieve data using $http.get when an accordion group is expanded in AngularJS

Currently, I am utilizing Angular v1.2.0rc1 along with Angular-UI Bootstrap.

[edit] My objective is to implement a load-on-demand feature with caching while incorporating an accordion functionality.

The accordion group that I am using can be found here. Due to backend requirements, my aim is to only load the contents within the accordion when it is opened by a user click.

I also want to ensure that the response data is cached so that users can freely open and close the accordion without causing undue strain on the server.

Despite attempting to use ng-click on the heading, it seems to be overridden by AngularUI Bootstrap. Is there a viable solution to this issue?

javascript angularjs angular-ui

Answer 1

Answer №1

To capture the ng-click event, use the accordion heading tag.

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

Implement these controllers for functionality:

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

Answer 2

To capture the ng-click event, use the accordion heading tag.

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

Implement these controllers for functionality:

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

Retrieve data using $http.get when an accordion group is expanded in AngularJS

Answer №1

Similar questions

"Maximizing battery life: Efficient video playback on iOS in low power

Using Javascript regex to remove spaces inside parentheses

Using Gmail in conjunction with Heroku for email delivery

Three pie or doughnut charts instead of one are utilized within Chart.js

Using node.js to parse an XML file from a URL and iterate through it to retrieve all the URLs contained within

Customizing the color scheme of specific components using Material UI inline styling

Concealing URL parameters in ui-sref (using ui.router)

Having trouble with tabs in jQuery?

Dealing with React Native text overflowing beyond the screen width when using FlexWrap

Code for switching between accordion panels with a simple button press

Collection of items consists of identical objects repeated multiple times

Oops! There seems to be an error with the <path> attribute. It looks like we were expecting a number, but received something different: "

Encountering a ReactJs and TypeScript error: "menuItems.map is not a function, issue with map method"

JavaScript and JSON interchangeably, the first AJAX response should be rewritten by the second response

ReactJS is in need of extracting certain values from a promise

Which components of node modules are essential for both production and development environments?

Can you explain the role of the faceVertexUV array within the three.js Geometry class?

How can one determine if a DOM element has been generated dynamically?

Unable to "serialize" geoJSON information

Utilizing a server for seamless communication between a mobile device and a website