CODEWITHSUNDEEP
javascriptangularjsangular-ui
Simon
Simon

Reputation: 1476

angularjs accordion load data when opening

We are making use of the angularjs accordion, however, our accordion is fairly big, and contains a lot of data. What we are looking at doing is loading the data when the accordion opens. ie dont render the internal content, until a user click on the accordion header. Below is how we are using the accordion at the moment:-

          <accordion close-others="false">
            <accordion-group heading="{{result.ReceivedDateTime}}{{result.OrderName}}"  ng-repeat="result in resultsbyorder">

            <table id="tbl" class="table table-striped table-bordered" ng-repeat="Grid in result.Results">
                <tr ng-repeat="item in Grid" ng-show="$first">
                    <th ng-repeat="somat in item">
                    {{somat.ColumnHeader}}
                    </th>
                </tr>
                <tr ng-repeat="item in Grid">
                    <td ng-repeat="somat in item">
                    {{somat.ColumnValue}}
                    </td>          
                </tr>        
            </table>

            </accordion-group>
          </accordion>

as a side note, is it possible to only render the accordion headers that are displayed on the screen, then render the remaining on scrolling?

Upvotes: 2

Views: 4363

Answers (2)

Daniel Graham
Daniel Graham

Reputation: 399

I am doing this very thing at the moment and have found that Angular likes using a collection (even if it's just a single element) to make the accordion, to wit if you do, you can bind the is-open to an element on that group and then setup a watch on that group in the controller. Consider the following (think of putting an ajax call to get your data instead of logging to console):

var ngtestapp = angular.module("ngtestapp", ['ui.bootstrap']);

ngtestapp.controller("ngTestController", function ($scope) {
    $scope.userComments = [
        {
            RowId: 123,
            DateCreated: new Date(2015, 1, 2, 0, 0, 0, 0),
            CreatedBy: 564,
            Message: 'Carpe Dieum',
            CreatedByDisplayName: 'Daniel Graham'
        },
        {
            RowId: 124,
            DateCreated: new Date(2015, 1, 5, 0, 0, 0, 0),
            CreatedBy: 562,
            Message: 'That was awesome',
            CreatedByDisplayName: 'Peter Griffin'
        }
    ];
    $scope.feedbackGroup = [{ title: "User Comments", open: false }];
    $scope.$watch('feedbackGroup', function (feedbackGroup) {
        if (feedbackGroup[0].open) {
            console.log("opened feedback group.");
        } else {
            console.log("closed feedback group.");
        }
    }, true);
    $scope.userTaskNote = "user task test note";
});
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
<html lang="en" ng-app="ngtestapp">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-controller="ngTestController">
    <div class="container-fluid">
	<accordion close-others="true">
	<accordion-group ng-repeat="group in feedbackGroup" heading="{{group.title}}" is-open="group.open">
	  <ul class="list-group">
		<li class="list-group-item" ng-repeat="comment in userComments track by $index | orderBy:comment.DateCreated">
		  <span class="badge" ng-bind="comment.DateCreated | date:'shortDate'"></span>
		  <strong ng-bind="comment.CreatedByDisplayName">Username</strong> <p ng-bind="comment.Message">comment</p>
		</li>
	  </ul>
	</accordion-group>
        <accordion-group is-open="false" heading="Other">
          <textarea class="form-control input-sm" ng-model="userTaskNote" placeholder="Add a task note here..."></textarea>
        </accordion-group>
	</accordion>
    </div>
</div>
</body>
</html>

Upvotes: 0

callmekatootie
callmekatootie

Reputation: 11228

I think what you are better off doing is to compile it once when it is opened the first time.

That way, you don't have to compile the same content again, even though it was compiled before the last time the accordion group was opened.

Over the top of my head, I can think of using the ng-switch directive. As you must be aware, this directive allows to display DOM elements conditionally, based on the case variable.

However, where this directive differs from the ng-show or ng-hide directive is that the contents within the case statement are not compiled until the corresponding case variable is matched.

Thus, what you could do is have the following setup in your HTML document:

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen">
        <accordion-heading>
            Accordion Heading
        </accordion-heading>
        <div ng-switch on="isopen">
            <div ng-switch-when="true">
                <!-- Content that should be compiled when the accordion is opened
                     goes here -->
            </div>
        </div>
    </accordion-group>
</accordion>

A demonstration of the same can be found in this plunkr.

Also, I believe ng-if directive also achieves the same effect. So, you can use either of the directives to achieve your requirements.

Upvotes: 1

Related Questions