대규모 데이터 세트에 여러 필터가 있는 ng-multiple

대규모 데이터 세트에 여러 필터가 있는 ng-multiple

저는 아직 AngularJS가 처음이라서 간단한 CRUD 앱을 하려고 합니다.현재 (JSON 파일에서) 데이터 가져오기$http에 있어서div컨트롤러에 의해 처리됨MyCtrl1.

function MyCtrl1($scope, $http) {
    $http.get('data/accounts.json').success(function(data) {
        $scope.accounts = data;
    ...
    }); 
}

이 안에div는 입니다.table다음과 같이tbody:

<tbody>
    <tr ng-repeat="account in accounts | orderBy:sort.field:sort.desc | startFrom:currentPage * pageSize | limitTo:pageSize">
        <td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td>
    </tr>
</tbody>

그orderBy선택한 필드에 따라 필터 정렬startFrom어레이를 슬라이스하여 특정 지점에서 시작합니다.limitTo미리 설정된 페이지 크기에 따라 필터링합니다.페이지 번호 필터가 없으면 퍼포먼스는 형편없지만, 다른 방법이 있을까요?

크롬용 Batarang을 가지고 있는데 Performance 탭 아래에 표시되어 있습니다.ngRepeatWatch제가 하고 있는 모든 필터링과 관련이 있을 것 같아요

{{ expression | filter1 | filter2 }}

그냥 사용하다

<tr ng-repeat="account in accounts | filter1 | filter2 | filter3" >
  <td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td>
</tr>

각도 2는 파이프를 사용하지만 필터처럼 보입니다.

<div>The chained hero's birthday is
<p>{{  birthday | date:'fullDate' | uppercase}}</p>
<div>

나는 이 질문이 오래되었다는 것을 안다. 하지만 미래의 누구에게도.라인 필터링은 DOM 상에서 직접 동작하기 때문에 (컴퓨팅상) 비용이 많이 듭니다.1000 행 이상의 대량의 데이터를 처리하는 경우에는 컨트롤러에서 수집을 필터링한 후 반복하는 것이 훨씬 좋습니다.

컨트롤러나 서버 측에서 페이지 매김을 처리합니다.내 생각에 ng-repeat은 단지 시청해야 할 것뿐만 아니라 전체 목록을 보고 있는 것 같아. 매우 느려질 거야.

이것은 필터는 아니지만 다음과 같이 배열의 $index를 평가하는 ng-hide 지시문을 사용할 수 있습니다.

<div class="col-sm-12 col-lg-12" ng-repeat="message in messages | orderBy: '-id' as filtered_result track by message.id  ">
  <div class="card-box widget-user" ng-hide="{{$index >= 4}}">
    <div>
      <img ng-src="{{message.imageUrl}}" class="img-responsive" alt="{{message.imageUrl}}">
      <div class="wid-u-info">
        <h3 class="m-t-0 m-b-5">{{message.title }}</h3>
        <p class="text-muted m-b-5 font-13" ng-bind-html="message.content | ellipsis:147 | trusted"></p>
        <!-- <p class="text-muted m-b-5 font-13">{{message.content | limitTo:130}}</p> -->
        <small class="label" ng-class="{'label-success':message.type=='Message','label-warning':message.type=='Announcement'}"><b>{{message.type}}</b></small>
      </div>
    </div>
  </div>
</div>

CRUD는 컨트롤러가 아닌 공장 또는 서비스에서 취급해야 합니다.컨트롤러는 뷰와 서비스 간의 통신만 담당한다고 알고 있습니다.

편집 1: John Papa Style Guide (Angular - 1) 발췌 - 서비스 및 공장에 위임하여 컨트롤러 로직을 지연시킵니다.

이유: 로직을 서비스 내에 배치하고 함수를 통해 공개하면 여러 컨트롤러에 의해 재사용될 수 있습니다.

이유: 서비스 내의 로직은 유닛 테스트에서 보다 쉽게 분리할 수 있지만 컨트롤러 내의 호출 로직은 쉽게 조롱당할 수 있습니다.

이유: 종속성을 제거하고 구현 세부 정보를 컨트롤러에서 숨깁니다.

이유: 컨트롤러의 슬림화, 트림화, 집중성을 유지합니다.

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y035

언급URL : https://stackoverflow.com/questions/14126905/ng-repeat-with-multiple-filters-on-large-data-set