ngRepeat 사용시 표시되는 결과 수 제한

148

AngularJS 튜토리얼 을 이해하기 어렵다는 것을 알았습니다 . 이것은 전화를 표시하는 앱을 만드는 과정을 안내합니다. 나는 5 단계에 있으며 실험으로 사용자가 표시하고자하는 수를 지정할 수 있다고 생각했습니다. 보기는 다음과 같습니다.

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>

사용자가 원하는 결과 수를 입력 할 수있는이 행을 추가했습니다.

How Many: <input ng-model="quantity">

내 컨트롤러는 다음과 같습니다.

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

중요한 라인은 다음과 같습니다

$scope.phones = data.splice(0, 'quantity');

얼마나 많은 전화를 표시해야하는지 숫자로 하드 코딩 할 수 있습니다. 입력하면 55가 표시됩니다. 내가하고 싶은 것은보기에서 해당 입력의 숫자를 읽고 data.splice줄에 넣는 것입니다 . 따옴표를 사용하거나 사용하지 않고 시도했지만 작동하지 않습니다. 어떻게해야합니까?

— 캡틴 스택
소스

345

약간 더 "Angular 방식"은 Angular limitTo에서 기본적으로 제공 하는 간단한 필터 를 사용하는 것입니다 .

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

PLUNKER

— 스튜이
소스

54

"추적"을 사용하는 경우 필터 다음에 있어야한다는 점을 지적하고 다른 사람을 몇 분만 절약하면됩니다.

— stephan.com

3

filter 및 limitTo를 사용할 때 사용 가능한 항목 수를 얻는 방법이 있습니까? 사용하고 limitTo싶지만 "추가로드"버튼을 제공하여 한도를 늘리십시오. 더 많은 레코드를 사용할 수있는 경우에만 표시되어야합니다.

— Tim Büthe

무엇입니까 filter:query?

— bigpony

OP의 질문에 따라 @defmx는 다음 query과 같습니다.Search: <input ng-model="query">

— jusopi

45

파티에 조금 늦었지만 이것은 나를 위해 일했습니다. 다른 누군가가 유용하다고 생각합니다.

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>

— 쿠치
소스

2

아마도 모든 항목을 평가해야하므로 limitToFilter가 큰 배열 인 경우 limitToFilter를 사용하는 것보다 효율적이지 않을 것으로 생각됩니다

— rom99

3

나는 훨씬 더 많은 백업 배열에서 6 개의 항목을 보여주고 싶었던 시나리오가있었습니다. 를 사용 ng-if="$index < 6"하면 전체 배열을 검색 가능하게 유지하면서 처음 6 개만 표시 할 수있었습니다 (검색 필드와 결합 된 필터가 있습니다).

— Jeroen Vannevel

제한이 아니며, 3보다 많으면 카운트 전체를 숨 깁니다.

— fdrv

ng-if이 경우 @ Jek-fdrv-No $index는보다 큰 repeater의 DOM 요소를 렌더링하지 않습니다 3. 경우 $index중계기에 0, 1, or 2, 조건은 true와 DOM 노드가 생성됩니다. 요소가 DOM에 추가 되지 않는다는ng-if 점에서 다릅니다 . ng-hide

— 쿠지

2

모든 데이터를 초기에 저장

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 5);
    $scope.allPhones = data;
  });

  $scope.orderProp = 'age';
  $scope.howMany = 5;
  //then here watch the howMany variable on the scope and update the phones array accordingly
  $scope.$watch("howMany", function(newValue, oldValue){
    $scope.phones = $scope.allPhones.splice(0,newValue)
  });
}

EDIT 가 실수로 내부에 있어야 할 컨트롤러 외부에 시계를 놓았습니다.

— shaunhusain
소스

2

다음은 HTML에서 필터를 제한하는 또 다른 방법입니다. 예를 들어 limitTo : 3을 사용하는 것보다 3 개의 목록을 표시하려고합니다 .

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>

— 리조
소스

1

객체 또는 다차원 배열이있는 경우이 경우 더 잘 작동합니다. 첫 번째 항목 만 표시하고 다른 항목은 루프에서 무시됩니다.

.filter('limitItems', function () {
  return function (items) {
    var result = {}, i = 1;
    angular.forEach(items, function(value, key) {
      if (i < 5) {
        result[key] = value;
      }
      i = i + 1;
    });
    return result;
  };
});

원하는 것을 5로 변경하십시오.

— fdrv
소스

0

ng-repeat에 제한된 수의 결과를 표시하려면 limitTo 필터를 사용하십시오.

<ul class="phones">
      <li ng-repeat="phone in phones | limitTo:5">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
</ul>

— 라지 란 셰티
소스

-3

이것을 달성하는 또 다른 (그리고 더 나은 생각) 방법은 실제로 데이터를 가로 채는 것입니다. limitTo는 괜찮지 만 배열에 실제로 수천이 포함되어있을 때 10으로 제한하면 어떻게됩니까?

내 서비스를 호출 할 때 간단히 다음과 같이했습니다.

TaskService.getTasks(function(data){
    $scope.tasks = data.slice(0,10);
});

이렇게하면 뷰로 전송되는 내용이 제한되므로 프런트 엔드에서 수행하는 것보다 성능이 훨씬 좋습니다.

— 맷 손더스
소스

limitTo의 구현은 어쨌든 array.slice ()를 사용하므로 배열의 크기 차이는 직접 수행하는 것과 동일한 성능 차이를 가져야합니다. github.com/angular/angular.js/blob/master/src/ng/filter/…

— rom99

그러나 limitTo는 실제로 뷰로 전송되는 데이터를 제한하지 않지만, 이렇게하면 그렇게합니다. console.log ()를 사용하여 이것을 테스트했습니다.

— 매트 손더스

1

예, 당신이하고있는 일은 뷰에 새로운 배열을 노출시키는 것입니다 (실제로 그것을 어디에서나 '보내는 것'이라고 생각하지 않습니다). 데이터의 처음 10 개 항목에만 관심이 있고 데이터가 다른 곳에서 참조되지 않은 경우이 방법으로 메모리 공간을 줄일 수 있습니다 (데이터가 가비지 수집 될 수 있다고 가정). 그러나 여전히 참조를 유지하는 경우 datalimitTo를 사용하는 것보다 효율적이지 않습니다.

— rom99