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

Program / 글쓴이

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줄에 넣는 것입니다 . 따옴표를 사용하거나 사용하지 않고 시도했지만 작동하지 않습니다. 어떻게해야합니까?

답변

약간 더 “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

답변

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

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

답변

모든 데이터를 초기에 저장

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 가 실수로 내부에 있어야 할 컨트롤러 외부에 시계를 놓았습니다.

답변

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

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

답변

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

.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로 변경하십시오.

답변

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

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

답변

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

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

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

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