Trong Angular ngFor là chỉ thị hoàn thành động cơ hiển thị nội dung lặp lại hoặc danh sách với ít dòng mã nhất, điều này phục vụ mục đích tương tự như đối với các vòng lặp trong các ngôn ngữ lập trình thông thường Chúng ta có thể in các dòng nội dung lặp lại dựa trên một số bằng cách sử dụng hàm javascript/typescript Array() sẽ tạo danh sách các số từ 0 đến n-1. Chúng tôi duyệt qua danh sách này để tạo ra n dòng nội dung lặp lại HTML_QuickForm2_Container_Repeat là một phần tử chấp nhận Vùng chứa 'nguyên mẫu' (Bộ trường hoặc Nhóm, nhưng không phải là một Lặp lại khác) và lặp lại nhiều lần trong biểu mẫu. Các mục lặp đi lặp lại có thể được tự động thêm/xóa thông qua Javascript, phần phía máy chủ sẽ tự động hiểu những thay đổi này. Có thể dễ dàng tận dụng xác thực phía máy chủ và phía máy khách. các quy tắc được thêm vào Container nguyên mẫu và các phần tử con của nó cũng được lặp lại Tệp ví dụ repeat.php được cài đặt cùng với gói trình bày cách sử dụng các phần tử lặp lại với Bộ trường và Nhóm
HTML_QuickForm2_Container_Repeat chỉ có một phần tử con trực tiếp. một Container nguyên mẫu, được đặt bằng phương thức hoặc được truyền dưới dạng khóa 'prototype' của tham số $data cho appendChild(), insertB Before(), removeChild() có sẵn cho phần tử Lặp lại như thường lệ, nhưng đây là các proxy cho các phương thức của nguyên mẫu làm việc với các phần tử con của nó và sẽ đưa ra các ngoại lệ nếu nguyên mẫu chưa được đặt. Một ngoại lệ cũng sẽ được đưa ra nếu bạn cố gắng thêm một phần tử Lặp lại khác vào nguyên mẫu Thêm phần tử vào Lặp lại $fieldset = new HTML_QuickForm2_Container_Fieldset();
$repeat = new HTML_QuickForm2_Container_Repeat();
$repeat->setPrototype($fieldset);
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
0
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
1
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
2
repeat: 1; fieldset: 0
repeat: 1; fieldset: 1
Như trường hợp của các nhóm, phần tử lặp lại sẽ thay đổi tên của các phần tử con của nó, ngoài ra thuộc tính
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
3 sẽ được thay đổi. Tuy nhiên, thay vì thêm tên của phần lặp lại, một "mẫu chỉ mục" đặc biệt
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
4 sẽ được thêm vào tên và
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
5 vào
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
3. Chuỗi
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
7 trong các chuỗi này sau đó sẽ được thay thế bằng chỉ mục thực tế của mục được lặp lại để tạo ra các tên duy nhất /
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
3sTên mặc định cho các phần tử lặp lại
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
9
0
1
2
3
4
id="qfauto-0_:idx:" class="repeatItem repeatPrototype"
id="qfauto-0_0" class="repeatItem"
id="qfauto-0_1" class="repeatItem"
id="qfauto-0_key" class="repeatItem"
Có một vài điều đáng chú ý trong kết quả này - Khóa cho các mục lặp lại được phát hiện tự động từ nguồn dữ liệu bằng cách sử dụng các giá trị cho trường
5. Đôi khi, tốt hơn là đặt rõ ràng trường để sử dụng để khám phá các chỉ mục bằng cách sử dụng - Các khóa không bắt buộc phải là số, tuy nhiên, chúng phải khớp với HTML_QuickForm2_Container_Repeat. Biểu thức chính quy INDEX_REGEXP.
6 - Đầu ra chứa một mục bổ sung vẫn còn nguyên các mẫu chỉ mục của nó. Nó sẽ được ẩn nhờ lớp CSS
7 và sẽ được mã Javascript sử dụng để thêm các mục lặp lại có thể nhìn thấy mới
Nếu bạn đang sử dụng một nhóm được đặt tên làm nguyên mẫu lặp lại, bạn có thể muốn sử dụng cấu trúc tên khác.
8 thay vì
9. Có thể làm như vậy nếu bạn đặt thủ công
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
0 vào tên của nhóm, Lặp lại sẽ không xáo trộn thêm tên nếu chuỗi này đã có trong đóTên tùy chỉnh cho các phần tử lặp lại
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
1
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
2
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
3
2
3
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
6
Đối với radio và hộp kiểm, cũng có thể đặt
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
7 vào thuộc tính
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
8, theo cách này, tên của chúng sẽ không bị thay đổi, về cơ bản cho phép sử dụng một bộ radio hoặc hộp kiểm cho tất cả các mục lặp lạiNhư đã lưu ý trong ví dụ trên, các chỉ mục cho các mục lặp lại có thể được tự động phát hiện từ. Tên trường được sử dụng để khám phá các chỉ mục có thể được đặt rõ ràng bằng hoặc để lại cho Lặp lại chọn tự động bằng cách sử dụng tên của các phần tử con của nguyên mẫu. Khi đoán, nó sẽ chỉ xem xét các phần tử dự kiến sẽ luôn có giá trị gửi, vì vậy các phần tử như nút, hộp kiểm và nhiều lựa chọn sẽ không được sử dụng Các chỉ mục cũng có thể được đặt thủ công bằng cách sử dụng, tương ứng cũng có sẵn. Các chỉ mục trùng lặp và những chỉ mục không khớp HTML_QuickForm2_Container_Repeat. INDEX_REGEXP sẽ bị bỏ qua bởi setIndexes()
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
9
0quickform.js1
quickform.js2
quickform.js3
array(0) {
}
array(3) {
[0]=>
int(0)
[1]=>
int(1)
[2]=>
string(3) "key"
}
array(3) {
[0]=>
string(3) "foo"
[1]=>
string(3) "bar"
[2]=>
string(3) "baz"
}
Việc đặt chỉ mục cho các phần tử lặp lại hoạt động khá giống với việc đặt giá trị cho các phần tử khác, vì vậy thực sự hữu ích
Bạn có thể lặp lại một yếu tố bằng CSS không?
Hàm CSS repeat() đại diện cho một đoạn lặp lại của danh sách theo dõi , cho phép một số lượng lớn cột hoặc hàng thể hiện mẫu lặp lại được viết ở dạng nhỏ gọn hơn.
Làm cách nào để lặp lại một phần tử trong JavaScript?
var repeatelem = function(elem, n){ // trả về một mảng có phần tử elem lặp lại n lần. var arr = []; . concat(elem); . javascript.
| 
