Lặp lại ng-lặp lại chỉ X lần trong AngularJs


87

Làm cách nào để sử dụng ng-repeat like for trong Javascript?

thí dụ:

<div ng-repeat="4">Text</div>

Tôi muốn lặp lại với ng-repeat 4 lần nhưng tôi có thể làm thế nào?


3
Cả hai đều có thể thực hiện được: Các chỉ thị có tên dựa trên lạc đà chẳng hạn như ngBind. Chỉ thị có thể được gọi bằng cách dịch tên trường hợp lạc đà thành trường hợp rắn với các ký tự đặc biệt sau:, -, hoặc _. Theo tùy chọn, chỉ thị có thể được bắt đầu bằng x- hoặc data- để làm cho nó tuân thủ trình xác thực HTML.
asgoth

2
wow sao lại có quá nhiều câu trả lời sai, bạn nên sử dụng ng-repeat = "item trong mục | limitTo: 4"
Bộ công cụ

Có khả năng anh ta không có bất kỳ mảng nào để lặp lại. Giả sử, để hiển thị các ngôi sao trong xếp hạng sao. Có thể có một trường cho bao nhiêu sao bạn cần hiển thị, nhưng trường này không thể lặp lại.
nirazul

@Toolkit ... và items.. là gì?
TJ

Câu trả lời:


343

Angular đi kèm với bộ lọc limitTo: limit, nó hỗ trợ giới hạn x mục đầu tiên và x mục cuối cùng:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
Đây hẳn là câu trả lời, vì nó cũng hoạt động với việc lặp lại các đối tượng trong một mảng. Thêm vào đó là tính năng Angular.
Ashley Coolman

29
Đây là một đoạn mã cực kỳ hữu ích, nhưng nó không thực sự đáp ứng được câu hỏi của OP. Anh ta chỉ đơn giản là đang tìm cách lặp lại n lần và có khả năng không có đối tượng thực sự để lặp lại.
SamHuckaby

2
đây sẽ là câu trả lời, nó sử dụng các công cụ được cung cấp bởi AngularJS lõi
Udo

10
Điều này không thực sự giải quyết được vấn đề. Bạn đang giả sử anh ta có một đối tượng tên làitems
Batman

1
Thực sự không phải là một câu trả lời hữu ích cho câu hỏi (tôi đã tìm hiểu cụ thể cách lặp lại X lần và không giới hạn X) nhưng dù sao thì đoạn mã hữu ích.
MacK,

66

Đây là cách giải quyết đơn giản nhất mà tôi có thể nghĩ ra.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

Đây là một ví dụ về Plunker.


2
Thông minh và rất hữu ích mà không cần sử dụng bất kỳ chức năng nào trong bộ điều khiển đang ngồi xung quanh. Vẫn bối rối tại sao điều này không phải là một tính năng góc
Mack

1
Đây nên là câu trả lời . OP đã yêu cầu "sử dụng ng-repeat like for". Điều này có nghĩa là có tất cả việc triển khai trực tiếp trong chế độ xem mà không cần bất kỳ "hỗ trợ" nào từ bộ điều khiển. Giải pháp này thực hiện chính xác điều đó ... và rất thông minh để khởi động.
karfus

Đẹp, nhưng không hoạt động trên tất cả các phiên bản góc cạnh. Tôi đang sử dụng 1.2.9 và nó không được hỗ trợ:Error: [$parse:isecfld]
Emaborsa

50

Bạn có thể sử dụng phương thức lát cắt trong đối tượng mảng javascript

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

Ngắn gọn


2
tại sao nó sai? Nó hoạt động. Hãy xem một kịch bản khác, nếu bạn muốn các phần tử mảng từ 2 đến 4 từ các chỉ mục mảng. Nó có hoạt động với bộ lọc limitTo không?
Gihan

4
Đó là không sai chỉ isnt nó dễ dàng nhưitem in items|limitTo:4
CENT1PEDE

1
Điều này thêm chức năng mà tôi có thể hiển thị các mục từ 1-4, sau đó nhấp vào nút để thay đổi .slice (0,4) thành .slice (5,8), cho phép tạo một bộ phân trang đơn giản. Cảm ơn!
BaneStar007

39

trong html:

<div ng-repeat="t in getTimes(4)">text</div>

và trong bộ điều khiển:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

BIÊN TẬP :

với anglejs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

19
lựa chọn khác: t in [1,2,3,4]hoặc t in 'aaaa' vv :)
Valentyn Shybanov

4
Có vẻ kỳ lạ khi Angular không thể hỗ trợ một vòng lặp toán học mà không yêu cầu một hàm hỗ trợ nó.
Guido Anselmi

4
Vâng tôi có thể tưởng tượng phải lặp 30x, viết nó như [1,2,3,4].. Thật là một giải pháp ảm đạm này một
Matej

2
Xem câu trả lời dưới đây của DavidLin để có giải pháp tốt hơn.
SamHuckaby

@SamHuckaby vấn đề đang lặp lại trên một phạm vi .limitTo là vô ích trong trường hợp đó. Nó không phải là việc lặp lại trên một tập hợp các giá trị có nghĩa của riêng chúng, mà là lặp lại 4 lần chẳng hạn, không phải 4 lần trên một lát của mảng hiện có, chỉ 4 lần. giống như trong coffeescript khi bạn tạo một lát adhoc, chẳng hạn như "[0..4]", bạn không thực sự quan tâm đến các giá trị thực, chỉ là bạn sẽ lặp lại một thao tác 4 lần.
mpm

13

Câu trả lời do @mpm đưa ra không hoạt động, nó gây ra lỗi

Các bản sao trong bộ lặp không được phép. Sử dụng biểu thức 'theo dõi theo' để chỉ định các khóa duy nhất. Bộ lặp: {0}, Khóa trùng lặp: {1}

Để tránh điều này cùng với

ng-repeat = "t trong getTimes (4)"

sử dụng

theo dõi theo $ index

như thế này

<div ng-repeat = "t in getTimes (4) track by $ index"> TEXT </div>


kỹ thuật của tôi đã hoạt động với phiên bản anglejs mà tôi đã sử dụng. Chỉ cần kiểm tra plunkr, tôi sẽ cập nhật nó sớm nhất.
mpm

10

Để lặp lại 7 lần, cố gắng sử dụng một một mảng với chiều dài = 7 , sau đó theo dõibằng $ index :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]tạo một Mảng «b» trống,
.length=7đặt kích thước của nó là «7»,
&&bđể cho Mảng «b» mới có sẵn cho ng-repeat,
track by $indextrong đó «$ index» là vị trí của phép lặp.
ng-bind="$index + 1"hiển thị bắt đầu từ 1.

Để lặp lại X lần:
chỉ cần thay thế 7 bởi X .


Không rõ câu trả lời này cung cấp những gì mà chưa có trong câu trả lời được chấp nhận hoặc hai câu trả lời có phiếu bầu cao hơn.
JamesT

Không có gì hơn là Angular có thể mạnh mẽ như thế nào.
funnyniko

3
Hai câu trả lời có số phiếu cao hơn dường như giả định rằng «mục» là một mảng. Điều này làm cho mảng tại chỗ.
funnyniko

Làm tốt, nó hoạt động. Đây là giải pháp duy nhất thực sự giải quyết được câu hỏi của OP. Thật ngạc nhiên khi nó chỉ có một vài phiếu bầu. Tôi chỉ tự hỏi nếu có một giải pháp thanh lịch hơn.
Healforgreen

3

Tất cả các câu trả lời ở đây dường như giả định rằng các mục là một mảng. Tuy nhiên, trong AngularJS, nó cũng có thể là một đối tượng. Trong trường hợp đó, không lọc với limitTo hay array.slice sẽ hoạt động. Là một trong những giải pháp khả thi, bạn có thể chuyển đổi đối tượng của mình thành một mảng, nếu bạn không ngại mất các khóa đối tượng. Dưới đây là một ví dụ về bộ lọc để thực hiện điều đó:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

Khi nó là một mảng, hãy sử dụng slice hoặc limitTo, như đã nêu trong các câu trả lời khác.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.