Question

我们正在使用angularjs手风琴，但是，我们的手风琴相当大，并且包含大量数据。我们正在做的是在手风琴打开时加载数据。即，不要渲染内部内容，直到用户点击手风琴标题。以下是我们目前使用手风琴的方式： -

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

作为附注，是否可以仅渲染屏幕上显示的手风琴标题，然后在滚动时渲染剩余的？

Answer 1

我认为你最好做的是在第一次打开它时编译一次。

这样，你就不必再次编译相同的内容，即使它是在最后一次打开手风琴组之前编译的。

在我的头脑中，我可以考虑使用ng-switch指令。您必须知道，该指令允许根据大小写变量有条件地显示DOM元素。

但是，此指令与ng-show或ng-hide指令的不同之处在于，在匹配相应的大小写变量之前，不会编译case语句中的内容。

因此，您可以做的是在HTML文档中进行以下设置：

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

可以在plunkr中找到相同的演示。

另外，我相信ng-if指令也会达到同样的效果。因此，您可以使用其中任何一个指令来满足您的要求。

Answer 2

我现在正在做这件事，并且发现Angular喜欢使用一个集合（即使它只是一个元素）来制作手风琴，如果你这样做，你可以将is-open绑定到一个该组上的元素，然后在控制器中的该组上设置监视。请考虑以下事项（考虑使用ajax调用来获取数据而不是登录到控制台）：

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>

打开时angularjs手风琴载荷数据

2 个答案: