ngRepeat - ограничение количества отображаемых результатов

131

Я огромный AngularJS n00b, и я нахожу даже tutorials трудно понять. В этом учебном руководстве вы можете найти приложение, которое отображает телефоны. Я нахожусь на step 5, и я подумал, что в качестве эксперимента я попытаюсь разрешить пользователям указывать, сколько из них они хотели бы показать. Вид выглядит следующим образом:ngRepeat - ограничение количества отображаемых результатов

<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');

Я могу записать код в количестве, чтобы представить, сколько телефонов должно быть показано. Если я положу 5 дюймов, будет показано 5. Все, что я хочу сделать, это прочитать номер на этом входе из представления и поместить его в строку data.splice. Я пробовал с кавычками и без них, и я не работаю. Как мне это сделать?

источник

2013-07-14 Captain Stack

315

Чуть более "Угловой путь" будет использовать простой 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

источник

2013-07-14 21:07:42 Stewie

+43

Стоит отметить - и сохранить кого-то еще несколько минут - если вы используете «дорожку», он ДОЛЖЕН быть последним после фильтров. –

Есть ли способ получить количество доступных предметов при использовании фильтра и limitTo? Я хотел бы использовать 'limitTo', но для увеличения лимита можно добавить кнопку« загрузить больше ». Это должно отображаться только в том случае, если доступно больше записей. –

@ TimBüthe Попробуйте это решение: http://stackoverflow.com/a/19665313/1095616 – Stewie

магазин все данные первоначально

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 случайно положил часы вне контроллера он должен был внутри.

источник

2013-07-14 20:32:19 shaunhusain

Немного опоздал на вечеринку, но это сработало для меня. Надеюсь, кто-то найдет это полезным.

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

источник

2014-02-14 16:07:39 couzzi

Я подозреваю, что это будет менее эффективно, чем использование limitToFilter, если это большой массив, потому что каждый элемент, по-видимому, должен быть оцененным – rom99

У меня был сценарий, в котором я хотел показать 6 элементов из массива поддержки гораздо большего. Использование 'ng-if =" $ index <6 "' позволило мне показывать только первые 6, сохраняя весь массив поиска (у меня есть фильтр в сочетании с полем поиска). –

Это не предел, он скрывает весь результат, если счет больше 3. – fdrv

-3

Другой (и я думаю, что лучше) способ достижения этой цели является фактически перехватывать данные. limitTo в порядке, но что, если вы ограничиваете 10, когда ваш массив содержит тысячи?

При вызове моей службы я просто сделал это:

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

Это ограничивает то, что отправляется на взгляд, так должно быть гораздо лучше для производительности, чем делать это на переднем конце.

источник

2015-08-05 15:36:54

Реализация limitTo использует array.slice(), в любом случае любая разница в размере массива должна иметь одинаковую разницу в производительности, как и сама. https://github.com/angular/angular.js/blob/master/src/ng/filter/limitTo.js – rom99

, но limitTo фактически не ограничивает данные, отправленные на просмотр, тогда как делает это так. Я проверил это с помощью console.log(). –

Да, что вы делаете, это отображение нового массива в представление (я бы не подумал об этом как о «отправке» чего-нибудь в любом месте). Если вас интересуют только первые 10 элементов данных, и данные не упоминаются нигде, это может уменьшить объем памяти (при условии, что данные могут быть собраны в мусор). Но если вы все еще сохраняете ссылку на «данные», это не более эффективно, чем использование limitTo. – rom99

Это работает лучше в моем случае, если у вас есть объект или многомерный массив. Он отображает только первые элементы, другие будут просто проигнорированы в цикле.

.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 на то, что вы хотите.

источник

2016-04-01 22:48:45 fdrv

Используйте limitTo фильтр для отображения ограниченного количества результатов в ng-repeat.

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

источник

2017-11-17 12:43:01

ngRepeat - ограничение количества отображаемых результатов

ответ

Смежные вопросы