Ich habe ein Dataset von etwa 1000 Elementen im Speicher und versuche, einen Pager für dieses Dataset zu erstellen.
Ich verwende eine benutzerdefinierte Filterfunktion zum Filtern der Ergebnisse, und das funktioniert gut, aber irgendwie muss ich die Anzahl der Seiten herausholen.
Irgendwelche Hinweise?
Check out UI Bootstrap 's pagination Direktive . Am Ende habe ich es benutzt und nicht das, was hier veröffentlicht wurde, da es über genügend Funktionen für meinen aktuellen Gebrauch verfügt und eine gründliche Testspezifikation hat.
<!-- table here -->
<pagination
ng-model="currentPage"
total-items="todos.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<!-- items/page select here if you like -->
todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.Push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
Ich habe einen Arbeitsplunker als Referenz gemacht.
<!-- table here -->
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
<!-- items/page select here if you like -->
todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.Push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.numPages = function () {
return Math.ceil($scope.todos.length / $scope.numPerPage);
};
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
Ich habe einen Arbeitsplunker als Referenz gemacht.
Ich habe kürzlich Paging für die Built with Angular-Site implementiert. Sie können die Quelle überprüfen: https://github.com/angular/builtwith.angularjs.org
Ich würde vermeiden, einen Filter zu verwenden, um die Seiten zu trennen. Sie sollten die Elemente in Seiten des Controllers aufteilen.
Ich musste einige Male mit Angular die Paginierung implementieren, und es war immer ein bisschen schmerzhaft für etwas, von dem ich glaubte, dass es vereinfacht werden könnte. Ich habe einige der hier und anderswo vorgestellten Ideen verwendet, um ein Paginierungsmodul zu erstellen, das die Paginierung so einfach macht wie:
<ul>
<li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>
// then somewhere else on the page ....
<dir-pagination-controls></dir-pagination-controls>
Das ist es. Es hat die folgenden Funktionen:
items
an die Paginierungslinks zu binden. ng-repeat
, sodass Sie einen beliebigen Ausdruck verwenden können, der in einem ng-repeat
gültig verwendet werden kann, einschließlich Filtern, Sortieren usw.pagination-controls
-Direktive muss nichts über den Kontext wissen, in dem die paginate
-Direktive aufgerufen wird.Für diejenigen, die eine "Plug-and-Play" -Lösung suchen, werden Sie meiner Meinung nach nützlich sein.
Der Code ist hier auf GitHub verfügbar und enthält eine Reihe guter Tests:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Wenn Sie interessiert sind, habe ich auch ein kurzes Stück mit etwas mehr Einblick in das Design des Moduls geschrieben: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
Ich habe gerade ein JSFiddle erstellt, das die Paginierung + Suche + Sortierung in jeder Spalte mit dem Btford-Code zeigt: http://jsfiddle.net/SAWsA/11/
Ich habe Scotty.NETs plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview aktualisiert, sodass neuere Versionen von angle, angle-ui und bootstrap verwendet werden.
Regler
var todos = angular.module('todos', ['ui.bootstrap']);
todos.controller('TodoController', function($scope) {
$scope.filteredTodos = [];
$scope.itemsPerPage = 30;
$scope.currentPage = 4;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.Push({ text:'todo '+i, done:false});
}
};
$scope.figureOutTodosToDisplay = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
};
$scope.makeTodos();
$scope.figureOutTodosToDisplay();
$scope.pageChanged = function() {
$scope.figureOutTodosToDisplay();
};
});
Bootstrap-UI-Komponente
<pagination boundary-links="true"
max-size="3"
items-per-page="itemsPerPage"
total-items="todos.length"
ng-model="currentPage"
ng-change="pageChanged()"></pagination>
Dies ist eine reine Javascript-Lösung, die ich als Angular-Service zur Implementierung von Paginierungslogik wie in Google-Suchergebnissen verpackt habe.
Arbeitsdemo zu CodePen unter http://codepen.io/cornflourblue/pen/KVeaQL/
Details und Erklärung unter diesem Blogbeitrag
function PagerService() {
// service definition
var service = {};
service.GetPager = GetPager;
return service;
// service implementation
function GetPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
// create an array of pages to ng-repeat in the pager control
var pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}
Ich habe die relevanten Bits hier extrahiert. Dies ist ein tabellarischer Pager, der keine Schnickschnackausführung bietet. Fühlen Sie sich frei, nach Bedarf zu ändern/hinzuzufügen:
//your data source may be different. the following line is
//just for demonstration purposes only
var modelData = [{
text: 'Test1'
}, {
text: 'Test2'
}, {
text: 'Test3'
}];
(function(util) {
util.PAGE_SIZE = 10;
util.range = function(start, end) {
var rng = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++)
rng.Push(i);
return rng;
};
util.Pager = function(data) {
var self = this,
_size = util.PAGE_SIZE;;
self.current = 0;
self.content = function(index) {
var start = index * self.size,
end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);
return data.slice(start, end);
};
self.next = function() {
if (!self.canPage('Next')) return;
self.current++;
};
self.prev = function() {
if (!self.canPage('Prev')) return;
self.current--;
};
self.canPage = function(dir) {
if (dir === 'Next') return self.current < self.count - 1;
if (dir === 'Prev') return self.current > 0;
return false;
};
self.list = function() {
var start, end;
start = self.current < 5 ? 0 : self.current - 5;
end = self.count - self.current < 5 ? self.count : self.current + 5;
return Util.range(start, end);
};
Object.defineProperty(self, 'size', {
configurable: false,
enumerable: false,
get: function() {
return _size;
},
set: function(val) {
_size = val || _size;
}
});
Object.defineProperty(self, 'count', {
configurable: false,
enumerable: false,
get: function() {
return Math.ceil(data.length / self.size);
}
});
};
})(window.Util = window.Util || {});
(function(ns) {
ns.SampleController = function($scope, $window) {
$scope.ModelData = modelData;
//instantiate pager with array (i.e. our model)
$scope.pages = new $window.Util.Pager($scope.ModelData);
};
})(window.Controllers = window.Controllers || {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
<thead>
<tr>
<th>
Col1
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
<td ng-bind-template="{{item.text}}"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<a href="#" ng-click="pages.prev()">«</a>
<a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
<a href="#" ng-click="pages.next()">»</a>
</td>
</tr>
</tfoot>
</table>
Unter Lösung ganz einfach.
<pagination
total-items="totalItems"
items-per-page= "itemsPerPage"
ng-model="currentPage"
class="pagination-sm">
</pagination>
<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) ">
Der jQuery Mobile-Winkeladapter verfügt über einen Paging-Filter, auf den Sie zugreifen können.
Hier ist eine Demo-Geige, die es verwendet (fügen Sie mehr als 5 Elemente hinzu und es wird paginiert): http://jsfiddle.net/tigbro/Du2DY/
Hier ist die Quelle: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
Für jeden, der es für mich schwierig findet, einen Paginator für eine Tabelle zu erstellen, poste ich das hier.
<pagination total-items="total" items-per-page="itemPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<!-- To specify your choice of items Per Pages-->
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
</div>
//And don't forget in your table:
<tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >
In deinen kanteln:
var module = angular.module('myapp',['ui.bootstrap','dialogs']);
module.controller('myController',function($scope,$http){
$scope.total = $scope.mylist.length;
$scope.currentPage = 1;
$scope.itemPerPage = 2;
$scope.start = 0;
$scope.setItems = function(n){
$scope.itemPerPage = n;
};
// In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
$scope.pageChanged = function() {
$scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
};
});
//and our filter
module.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
Ich verwende diese Drittanbieter-Paginierungsbibliothek und sie funktioniert gut. Es kann lokale/entfernte Datenquellen verwenden und ist sehr konfigurierbar.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]
[auto-hide=""]>
</dir-pagination-controls>
Seit Angular 1.4 akzeptiert der limitTo
-Filter auch ein zweites optionales Argument begin
Aus den docs :
{{limitTo_expression | limitTo: limit: begin}}
start (wahlweise) Zeichenfolge | Nummer
Index, an dem die Begrenzung beginnen soll. Als negativer Index gibt begin einen Offset vom Ende der Eingabe an. Standardeinstellung ist 0.
Sie müssen also keine neue Direktive erstellen. Mit diesem Argument können Sie den Versatz der Paginierung festlegen
ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage"
ng-wiederholen Paginierung
<div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<ul>
<li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
Next
</button>
</div>
<script>
var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.q = '';
$scope.getData = function () {
return $filter('filter')($scope.data, $scope.q)
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
$scope.data.Push("Item "+i);
}
}]);
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
</script>
ist eine wunderbare Wahl
Eine Anweisung, die beim Paging großer Datensätze helfen soll, wobei das Minimum an tatsächlichen Paging-Informationen erforderlich ist. Wir sind sehr abhängig von dem Server, um die Ergebnisse in diesem Paging-Schema zu filtern. Die zentrale Idee ist, dass wir nur die aktive "Seite" von Elementen speichern möchten, anstatt die gesamte Liste der Elemente im Speicher und auf Seiten des Clients zu speichern.
In früheren Nachrichten wurde im Wesentlichen empfohlen, wie Sie selbst ein Paging erstellen. Wenn Sie wie ich sind und eine fertige Direktive bevorzugen, habe ich gerade eine großartige Anweisung namens ngTable gefunden. Es unterstützt das Sortieren, Filtern und Paginieren.
Es ist eine sehr saubere Lösung, alles was Sie für Ihre Sicht brauchen:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
Und im Controller:
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
var start = (params.page() - 1) * params.count();
var end = params.page() * params.count();
$defer.resolve(orderedData.slice( start, end));
}
});
Link zu GitHub: https://github.com/esvit/ng-table/
Alte Frage, aber da ich denke, dass mein Ansatz ein wenig anders und weniger komplex ist, werde ich dies teilen und hoffen, dass jemand außer mir es nützlich findet.
Was ich als einfache und kleine Lösungfür die Paginierung empfand, ist die Kombination einer Direktive mit einem Filter, der die gleichen Bereichsvariablen verwendet.
Um dies zu implementieren, fügen Sie den Filter im Array hinzu und fügen die Direktive wie folgt hinzu
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>
p_Size und p_Step sind Bereichsvariablen, die im Gültigkeitsbereich angepasst werden können. Andernfalls ist der Standardwert von p_Size 5 und p_Step 1.
Wenn ein Schritt in der Paginierung geändert wird, wird p_Step aktualisiert und löst eine neue Filterung durch den Filter cust_pagination aus. Der Filter cust_pagination schneidet dann das Array in Abhängigkeit vom p_Step-Wert wie unten und gibt nur die aktiven Datensätze zurück, die im Abschnitt Paginierung ausgewählt wurden
var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;
Da ist mein Beispiel. Ausgewählte Schaltfläche in der Mitte der Liste Controller . Config >>>
$scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};
Logik für die Paginierung:
/*
Pagination
*/
$scope.$watch('pagination.total', function (total) {
if(!total || total <= $scope.pagination.config.count) return;
_setPaginationPages(total);
});
function _setPaginationPages(total) {
var totalPages = Math.ceil(total / $scope.pagination.config.count);
var pages = [];
var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
var finish = null;
if((start + $scope.pagination.config.size - 1) > totalPages){
start = totalPages - $scope.pagination.config.size;
}
if(start <= 0) {
start = 1;
}
finish = start + $scope.pagination.config.size - 1;
if(finish > totalPages){
finish = totalPages;
}
for (var i = start; i <= finish; i++) {
pages.Push(i);
}
$scope.pagination.pages = pages;
}
$scope.$watch("pagination.config.page", function(page){
_setPaginationPages($scope.pagination.total);
_getRespondents($scope.pagination.config);
});
und meine Sicht auf Bootstap
<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
<li ng-click="pagination.config.page = pagination.config.page - 1"
ng-class="{disabled: pagination.config.page == 1}" ><a href="#">«</a></li>
<li ng-repeat="p in pagination.pages"
ng-click="pagination.config.page = p"
ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
<li ng-click="pagination.config.page = pagination.config.page + 1"
ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">»</a></li>
</ul >
Es ist nützlich
Ich möchte meine Lösung hinzufügen, die mit ngRepeat
arbeitet, und die Filter, die Sie damit verwenden, ohne einen $watch
oder ein geschnittenes Array.
Ihre Filterergebnisse werden paginiert!
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myController', ['$scope', function($scope){
$scope.list= ['a', 'b', 'c', 'd', 'e'];
$scope.pagination = {
currentPage: 1,
numPerPage: 5,
totalItems: 0
};
$scope.searchFilter = function(item) {
//Your filter results will be paginated!
//The pagination will work even with other filters involved
//The total number of items in the result of your filter is accounted for
};
$scope.paginationFilter = function(item, index) {
//Every time the filter is used it restarts the totalItems
if(index === 0)
$scope.pagination.totalItems = 0;
//This holds the totalItems after the filters are applied
$scope.pagination.totalItems++;
if(
index >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
&& index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
)
return true; //return true if item index is on the currentPage
return false;
};
}]);
Stellen Sie im HTML-Code sicher, dass Sie Ihre Filter auf den ngRepeat
before the Paginierungsfilter anwenden.
<table data-ng-controller="myController">
<tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
<td>
{{item}}
</td>
<tr>
</table>
<ul class="pagination-sm"
uib-pagination
data-boundary-links="true"
data-total-items="pagination.totalItems"
data-items-per-page="pagination.numPerPage"
data-ng-model="pagination.currentPage"
data-previous-text="‹"
data-next-text="›"
data-first-text="«"
data-last-text="»">
</ul>
Sie können dies leicht mit der Bootstrap-UI-Direktive tun.
Diese Antwort ist eine Modifikation der Antwort von @ Scotty.NET. Ich habe den Code geändert, da die <pagination>
-Direktive jetzt veraltet ist.
Folgender Code generiert die Paginierung:
<ul uib-pagination boundary-links="true" total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" class="pagination" previous-text="‹" next-text="›" first-text="«" last-text="»"></ul>
Um es funktionsfähig zu machen, verwenden Sie dies in Ihrem Controller:
$scope.filteredData = []
$scope.totalItems = $scope.data.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
, end = begin + $scope.itemsPerPage;
$scope.filteredData = $scope.data.slice(begin, end);
};
$scope.pageChanged();
Weitere Optionen für die Paginierung finden Sie hier: Bootstrap-UI-Paginierungsrichtlinie
Übersicht: Paginierung mit
- ng-repeat
- uib-pagination
Aussicht :
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead style="background-color: #eee">
<tr>
<td>Dispature</td>
<td>Service</td>
<td>Host</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in app.metricsList">
<td>{{x.dispature}}</td>
<td>{{x.service}}</td>
<td>{{x.Host}}</td>
<td>{{x.value}}</td>
</tr>
</tbody>
</table>
<div align="center">
<uib-pagination items-per-page="app.itemPerPage" num-pages="numPages"
total-items="app.totalItems" boundary-link-numbers="true"
ng-model="app.currentPage" rotate="false" max-size="app.maxSize"
class="pagination-sm" boundary-links="true"
ng-click="app.getPagableRecords()"></uib-pagination>
<div style="float: right; margin: 15px">
<pre>Page: {{app.currentPage}} / {{numPages}}</pre>
</div>
</div>
</div>
</div>
JS Controller:
app.controller('AllEntryCtrl',['$scope','$http','$timeout','$rootScope', function($scope,$http,$timeout,$rootScope){
var app = this;
app.currentPage = 1;
app.maxSize = 5;
app.itemPerPage = 5;
app.totalItems = 0;
app.countRecords = function() {
$http.get("countRecord")
.success(function(data,status,headers,config){
app.totalItems = data;
})
.error(function(data,status,header,config){
console.log(data);
});
};
app.getPagableRecords = function() {
var param = {
page : app.currentPage,
size : app.itemPerPage
};
$http.get("allRecordPagination",{params : param})
.success(function(data,status,headers,config){
app.metricsList = data.content;
})
.error(function(data,status,header,config){
console.log(data);
});
};
app.countRecords();
app.getPagableRecords();
}]);
Ich wünschte, ich könnte einen Kommentar abgeben, aber ich muss das hier nur lassen:
Scotty.NETs Antwort und user2176745s Redo für spätere Versionen sind beide großartig, aber beide vermissen etwas, woran meine Version von AngularJS (v1.3.15) bricht:
ich bin nicht in $ scope.makeTodos definiert.
Das Ersetzen mit dieser Funktion behebt es daher für neuere Winkelversionen.
$scope.makeTodos = function() {
var i;
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.Push({ text:'todo '+i, done:false});
}
};