Giới hạn số lượng kết quả được hiển thị khi sử dụng ngRepeat

148

Tôi thấy các hướng dẫn AngularJS khó hiểu; ứng dụng này đang hướng dẫn tôi xây dựng một ứng dụng hiển thị điện thoại. Tôi đang ở bước 5 và tôi nghĩ như một thử nghiệm tôi sẽ cố gắng cho phép người dùng chỉ định số lượng họ muốn được hiển thị. Khung nhìn trông như thế này:

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

Tôi đã thêm dòng này nơi người dùng có thể nhập bao nhiêu kết quả họ muốn hiển thị:

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

Đây là bộ điều khiển của tôi:

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

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

Dòng quan trọng là:

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

Tôi có thể mã cứng trong một số để thể hiện số lượng điện thoại sẽ được hiển thị. Nếu tôi đặt 5vào, 5 sẽ được hiển thị. Tất cả những gì tôi muốn làm là đọc số trong đầu vào đó từ chế độ xem và đặt số đó vào data.splicedòng. Tôi đã thử với và không có dấu ngoặc kép, và không hoạt động. Làm thế nào để tôi làm điều này?

— Thuyền trưởng Stack
nguồn

345

Hơi "cách góc" hơn sẽ là sử dụng limitTobộ lọc đơn giản , như được cung cấp bởi Angular:

<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

— Stewie
nguồn

54

Thật đáng để chỉ ra - và tiết kiệm cho người khác một vài phút - rằng nếu bạn đang sử dụng "theo dõi" thì nó phải tồn tại sau các bộ lọc.

— stephan.com

3

Có cách nào để lấy số lượng vật phẩm khả dụng khi sử dụng bộ lọc và giới hạn không? Tôi muốn sử dụng limitTonhưng cung cấp nút "tải thêm" để tăng giới hạn. Điều này chỉ nên được hiển thị nếu có nhiều hồ sơ hơn.

— Tim Büthe

Là filter:querygì

— bigpony

@defmx theo câu hỏi của OP, queryxuất phát từSearch: <input ng-model="query">

— jusopi

45

Một chút muộn để dự tiệc, nhưng điều này làm việc cho tôi. Hy vọng người khác thấy nó hữu ích.

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

— couzzi
nguồn

2

Tôi nghi ngờ điều này sẽ kém hiệu quả hơn so với sử dụng giới hạnFilter nếu đó là một mảng lớn, bởi vì mọi mục có lẽ phải được đánh giá

— rom99

3

Tôi đã có một kịch bản mà tôi muốn hiển thị 6 mục từ một mảng sao lưu nhiều hơn nữa. Việc sử dụng ng-if="$index < 6"cho phép tôi chỉ hiển thị 6 đầu tiên trong khi vẫn giữ toàn bộ mảng có thể tìm kiếm (tôi có bộ lọc kết hợp với trường tìm kiếm).

— Jeroen Vannevel

Nó không phải là giới hạn, nó ẩn toàn bộ kết quả nếu được tính nhiều hơn 3.

— fdrv

@ Jek-fdrv - Không, ng-iftrong trường hợp này, sẽ không hiển thị phần tử DOM của bộ lặp có giá trị $indexlớn hơn 3. nếu $indextrong bộ lặp là 0, 1, or 2, điều kiện là truevà các nút DOM được tạo. ng-ifkhác với ng-hideý nghĩa là các phần tử không được thêm vào DOM.

— couzzi

2

lưu trữ tất cả dữ liệu của bạn ban đầu

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 đã vô tình đặt chiếc đồng hồ bên ngoài bộ điều khiển mà nó nên có bên trong.

— shaunhusain
nguồn

2

Đây là một cách khác để giới hạn bộ lọc của bạn trên html, ví dụ tôi muốn hiển thị 3 danh sách cùng lúc hơn là tôi sẽ sử dụng giới hạn: 3

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

— Rizo
nguồn

1

Điều này hoạt động tốt hơn trong trường hợp của tôi nếu bạn có mảng đối tượng hoặc đa chiều. Nó sẽ chỉ hiển thị các mục đầu tiên, khác sẽ chỉ bị bỏ qua trong vòng lặp.

.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;
  };
});

Thay đổi 5 về những gì bạn muốn.

— fdrv
nguồn

0

Sử dụng bộ lọc giới hạn để hiển thị số lượng kết quả giới hạn trong lặp lại ng.

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

— Cầu tàu Rajkiran
nguồn

-3

Một cách khác (và tôi nghĩ tốt hơn) để đạt được điều này là thực sự chặn dữ liệu. Giới hạn là ổn nhưng nếu bạn giới hạn ở mức 10 khi mảng của bạn thực sự chứa hàng nghìn thì sao?

Khi gọi dịch vụ của tôi, tôi chỉ cần làm điều này:

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

Điều này giới hạn những gì được gửi đến chế độ xem, vì vậy sẽ tốt hơn cho hiệu suất so với thực hiện điều này ở mặt trước.

— Matt Saunders
nguồn

Việc thực hiện giới hạn To sử dụng Array.slice () dù sao đi nữa, bất kỳ sự khác biệt nào về kích thước của mảng sẽ có cùng sự khác biệt về hiệu suất như tự thực hiện. github.com/angular/angular.js/blob/master/src/ng/filter/

— mẹo

nhưng giới hạn không thực sự giới hạn dữ liệu được gửi đến chế độ xem, trong khi thực hiện theo cách này. Tôi đã thử nghiệm điều này bằng cách sử dụng console.log ().

— Matt Saunders

1

Vâng, những gì bạn đang làm là để lộ một mảng mới ra khung nhìn (tôi thực sự sẽ không nghĩ đó là 'gửi' bất cứ thứ gì ở bất cứ đâu). Nếu bạn chỉ quan tâm đến 10 mục đầu tiên trong dữ liệu và dữ liệu không được tham chiếu ở bất kỳ nơi nào khác, thực hiện theo cách này có thể giảm dấu chân bộ nhớ (giả sử dữ liệu có thể được thu thập rác). Nhưng nếu bạn vẫn đang giữ một tài liệu tham khảo dataxung quanh, điều này không hiệu quả hơn việc sử dụng giới hạn.

— rom99