angularjs 여는 때 아코디언로드 데이터

우리는 angularjs 아코디언을 사용하고 있습니다. 그러나 아코디언은 상당히 크고 많은 양의 데이터가 포함되어 있습니다. 우리가 바라는 것은 아코디언이 열릴 때 데이터를로드하는 것입니다. 사용자가 아코디언 머리글을 클릭 할 때까지 내부 내용을 렌더링하지 않습니다. 아래 우리가 순간에 아코디언을 사용하는 방법은 다음과 같습니다 - 보조 노트로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>

, 그것은 가능한 경우에만 화면에 표시되는 아코디언 헤더를 렌더링 한 다음 스크롤에 남아있는 렌더링?

출처

2014-04-01 Simon

아코디언 없습니다. 아코디언 소스 코드를 수정하고 열기/닫기 이벤트를 추가 할 수 있습니다. – Kain

내가 처음에 열 때 한 번 컴파일하는 것이 좋다고 생각합니다.

그런 식으로 아코디언 그룹이 마지막으로 열리기 전에 컴파일 된 경우에도 동일한 콘텐츠를 다시 컴파일 할 필요가 없습니다.

내 머리 위로, 나는 ng-switch 지시어를 사용하는 것을 생각해 볼 수 있습니다. 이 지시문에서는 case 변수를 기반으로 DOM 요소를 조건부로 표시 할 수 있습니다.

그러나이 지시문이 ng-show 또는 ng-hide 지시문과 다른 경우 case 문 내의 내용은 해당 case 변수가 일치 할 때까지 컴파일되지 않습니다.

<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에서 찾을 수 있습니다

따라서, 당신이 할 수있는 것은 HTML 문서에서 다음과 같은 설정을 가지고 있습니다.

또한 나는 ng-if 지시어도 동일한 효과를 달성한다고 생각합니다. 따라서 지시문 중 하나를 사용하여 요구 사항을 충족시킬 수 있습니다.

출처

2014-04-01 09:39:07 callmekatootie

저는이 순간을 아주 잘하고 있습니다. Angular가 컬렉션을 사용하여 좋아하는 것을 발견했습니다 (단 하나의 요소 일지라도). 아코디언을 만들기 위해 컬렉션을 사용하고, 위트를 사용하면 is-open을 바인딩 할 수 있습니다. 해당 그룹의 요소를 선택하고 컨트롤러에서 해당 그룹에 대한 감시를 설정하십시오. (데이터를 얻을 아약스 전화를 넣는 대신 콘솔에 로그인 생각) 다음 사항을 고려 : 어떤 경우 공공

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"> 
 
\t <accordion close-others="true"> 
 
\t <accordion-group ng-repeat="group in feedbackGroup" heading="{{group.title}}" is-open="group.open"> 
 
\t <ul class="list-group"> 
 
\t \t <li class="list-group-item" ng-repeat="comment in userComments track by $index | orderBy:comment.DateCreated"> 
 
\t \t <span class="badge" ng-bind="comment.DateCreated | date:'shortDate'"></span> 
 
\t \t <strong ng-bind="comment.CreatedByDisplayName">Username</strong> <p ng-bind="comment.Message">comment</p> 
 
\t \t </li> 
 
\t </ul> 
 
\t </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> 
 
\t </accordion> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

출처

2015-02-26 20:18:28

angularjs 여는 때 아코디언로드 데이터

답변

관련 문제