Chỉ thị ng-repeat của AngularJS với ví dụ

Bởi: James Hartman James Hartman
Hours cập nhật

⚡ Tóm tắt thông minh

Chỉ thị `ng-repeat` trong AngularJS sẽ tạo ra một bản sao của một phần tử cho mỗi mục trong một tập hợp được định nghĩa trong phạm vi bộ điều khiển. Nó biến một mảng thành một danh sách, một bảng hoặc bất kỳ cấu trúc đánh dấu lặp lại nào mà không cần viết vòng lặp thủ công.

  • 🔁 Hành vi cốt lõi: ng-repeat sao chép phần tử chứa nó một lần cho mỗi mục, vì vậy chỉ thị này nên được đặt trên phần tử được lặp lại, chứ không phải trên phần tử chứa nó.
  • 🏷️ Biến vòng lặp: Tên đứng trước từ "in" trở thành bí danh cục bộ cho mục hiện tại bên trong bản sao đó.
  • 🧬 Phạm vi áp dụng cho trẻ em: Mỗi lần lặp đều nhận được phạm vi con riêng của nó, đó là lý do tại sao việc gán một giá trị kiểu nguyên thủy bên trong vòng lặp không truyền đến phạm vi cha.
  • 🔑 Bản sắc Tracking: A tracTham số `k by expression` cho AngularJS biết cách xác định các mục và nó là bắt buộc khi một tập hợp chứa các giá trị lặp lại.
  • 🔢 Người bản địa tích hợp sẵn: Các thuộc tính như $index, $first và $last có sẵn bên trong mỗi vòng lặp để đánh số và định kiểu.
  • ⚠️ Trạng thái hỗ trợ: AngularJS đã hết hạn hỗ trợ vào ngày 31 tháng 12 năm 2021 và sẽ không nhận được bất kỳ bản vá bảo mật nào nữa.
Đọc thêm

Chỉ thị ng-repeat của AngularJS

Chỉ thị ng-repeat trong AngularJS

ng-lặp lại Chỉ thị Trong AngularJS, ng-repeat được sử dụng để hiển thị các giá trị lặp lại được định nghĩa trong controller. Đôi khi chúng ta cần hiển thị một danh sách các mục trong view, và ng-repeat sẽ hiển thị danh sách được định nghĩa trong controller lên trang view.

⚠️ Thông báo hỗ trợ: AngularJS đã đạt đến Hết hạn sử dụng vào ngày 31 tháng 12 năm 2021. và không nhận được thêm bản vá lỗi hoặc bản sửa lỗi bảo mật nào nữa. Chỉ thị bên dưới vẫn chính xác để duy trì các ứng dụng AngularJS 1.x hiện có; trong phiên bản hiện đại có góc cạnh Tương đương với *ngFor Chỉ thị cấu trúc.

Ví dụ chỉ thị ng-repeat của AngularJS

Hãy cùng xem một ví dụ về chỉ thị ng-repeat trong AngularJS:

Chỉ thị ng-repeat trong AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Giải thích:

  1. Trong tạp chí điều khiểnTrước tiên, chúng ta định nghĩa mảng các mục trong danh sách sẽ được hiển thị trong khung nhìn. Ở đây, một mảng có tên là TopicNames Chứa ba mục, mỗi mục là một cặp tên-giá trị.
  2. Mảng được gán trực tiếp cho $scope.TopicNamesĐiều này giúp cho nó khả dụng đối với khung nhìn được liên kết với bộ điều khiển này.
  3. Các thẻ HTML <ul> (danh sách không có thứ tự) và <li> (Mục danh sách) hiển thị các mục. Chỉ thị ng-repeat lặp lại từng mục trong mảng và tpname là biến cục bộ lưu trữ mục hiện tại, vì vậy {{tpname.name}} in thuộc tính tên của nó.

⚠️ Đính chính: Lời giải thích ban đầu cho biết mảng đó đã được “thêm vào một biến thành viên có tên là topics“Không có biến nào như vậy tồn tại trong mã — mảng được gán trực tiếp cho $scope.TopicNames, đó là tên mà khung nhìn đề cập đến. Việc thêm tên thứ hai ở đây là một nguyên nhân phổ biến dẫn đến danh sách trống.

Nếu đoạn mã được thực thi thành công, kết quả sau sẽ hiển thị trên trình duyệt.

Chỉ thị ng-repeat trong AngularJS

Nhiều bộ điều khiển AngularJS

Trước đó, chúng ta đã thấy một bộ điều khiển duy nhất trong đó một phương thức xử lý cả phép cộng và phép trừ.tracthay vì xử lý các con số, bạn có thể sử dụng nhiều bộ điều khiển để tách biệt logic một cách rõ ràng hơn. Ví dụ, một bộ điều khiển có thể xử lý các con số trong khi bộ điều khiển khác xử lý các chuỗi ký tự.

Hãy cùng xem một ví dụ về việc định nghĩa nhiều bộ điều khiển trong một ứng dụng AngularJS.

Nhiều bộ điều khiển AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Giải thích:

  1. Hai bộ điều khiển được định nghĩa, firstcontroller và secondcontrollerMỗi phần tử gắn một biến vào chính nó. phạm vi: pname trong trường hợp đầu tiên, lname trong lần thứ hai
  2. Trong giao diện, bộ điều khiển thứ hai được lồng bên trong bộ điều khiển thứ nhất, và biểu thức có dạng như sau: lname từ phạm vi bên trong. Bởi vì một bộ điều khiển lồng nhau kế thừa từ bộ điều khiển cha của nó, {{pname}} Điều này cũng sẽ giải quyết được vấn đề — quyền thừa kế chảy từ trên xuống dưới, chứ không bao giờ chảy từ dưới lên trên.

Nếu đoạn mã được thực thi thành công, văn bản sẽ được hiển thị. bộ điều khiển thứ hai được hiển thị.

Nhiều bộ điều khiển AngularJS

Đừng bỏ lỡ:

Cách Sử dụng track bằng ng-repeat

Lỗi thường gặp nhất khi sử dụng ng-repeat là lỗi sau: Duplicates in a repeater are not allowedLỗi này xuất hiện khi một tập hợp chứa cùng một giá trị hai lần, và nó sẽ làm dừng hoàn toàn việc hiển thị danh sách.

Nguyên nhân là do danh tính. tracAngularJS cần một khóa ổn định cho mỗi mục để có thể tái sử dụng các nút DOM thay vì xây dựng lại chúng mỗi khi có mã băm. Theo mặc định, nó sử dụng chính giá trị của mục, do đó hai giá trị giống hệt nhau sẽ xung đột.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Best for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

Việc lựa chọn giữa hai hình thức này quan trọng hơn vẻ bề ngoài ban đầu. Tracking by $index Việc này luôn giải quyết lỗi vì vị trí là duy nhất theo định nghĩa, nhưng nó lại liên kết mỗi nút DOM với một slot thay vì với một bản ghi. Việc sắp xếp lại hoặc lọc tập hợp sau đó sẽ sử dụng lại các nút sai, điều này thể hiện ở việc các trường nhập liệu vẫn giữ nguyên.ping Văn bản của hàng trước đó.

Tracking bằng một mã định danh chính xác như topic.id Nó hoàn toàn tránh được điều đó. AngularJS có thể theo dõi từng bản ghi khi nó di chuyển, vì vậy nó sắp xếp lại các nút hiện có thay vì phá hủy và xây dựng lại chúng. Trên các danh sách dài, điều này cũng nhanh hơn đáng kể, vì việc hiển thị lại chỉ tác động đến các hàng thực sự đã thay đổi. Sử dụng $index Chỉ áp dụng cho mảng các giá trị thông thường không bao giờ được sắp xếp lại.

Các tính năng đặc biệt có sẵn bên trong ng-repeat

Mỗi lần lặp của ng-repeat đều hiển thị một số thuộc tính chỉ đọc trên phạm vi con của chính nó. Chúng mô tả vị trí của mục hiện tại trong tập hợp, bao gồm đánh số, kiểu xen kẽ và dấu phân cách mà không cần thêm bất kỳ trạng thái nào vào bộ điều khiển.

Bất động sản Kiểu Giá trị
$index Con số Vị trí của mục hiện tại, bắt đầu từ 0.
$first Boolean Chỉ đúng với mục đầu tiên.
$last Boolean Chỉ đúng với mục cuối cùng.
$middle Boolean Điều này đúng với mọi mục không phải là mục đầu tiên cũng không phải là mục cuối cùng.
$even Boolean Đúng khi $index là số chẵn
$odd Boolean Đúng khi $index là số lẻ

Một cách sử dụng điển hình là kết hợp chúng với ng-class để tạo sọc vằn.ping, như trong ng-class="{'row-alt': $odd}"hoặc sử dụng ng-if để tạo dấu phân cách trên mỗi hàng ngoại trừ hàng cuối cùng, được viết như sau: ng-if="!$last"Việc hiển thị số hàng dễ đọc đối với con người chỉ đơn giản là... {{$index + 1}}Vì chỉ số bắt đầu từ 0, nên tất cả sáu thuộc tính đều được tính toán lại tự động mỗi khi tập hợp thay đổi, do đó không cần phải tính toán lại bằng tay.

Các lỗi thường gặp khi sử dụng ng-repeat và cách khắc phục chúng.

Hầu hết các sự cố với ng-repeat đều xuất phát từ các giá trị trùng lặp, từ việc kế thừa phạm vi hoặc từ việc chỉ thị nằm trên phần tử không phù hợp. Mỗi triệu chứng dưới đây đều nêu rõ nguyên nhân của nó.

  • Không được phép có các bản ghi trùng lặp trong bộ lặp: Bộ sưu tập chứa một giá trị lặp lại. Thêm track by $index, hoặc tốt hơn, track by một bất động sản độc đáo.
  • Danh sách này không hiển thị gì cả: Tên trong view không khớp với thuộc tính trên scope. In bộ sưu tập với {{TopicNames}} để xác nhận nó đã đến nơi.
  • Mọi thành phần đều lặp lại, kể cả phần bao bọc: Thuộc tính ng-repeat được đặt trên vùng chứa thay vì trên phần tử. Hãy di chuyển nó đến đúng vị trí. <li> or <tr>.
  • Chỉnh sửa dữ liệu nhập vào sẽ thay đổi nhầm hàng: danh sách là tracđược thực hiện bởi $index trong khi các mặt hàng được sắp xếp lại. Track được thay thế bằng một mã định danh ổn định.
  • Các thay đổi bên trong vòng lặp không được lưu lại: Mỗi lần lặp có phạm vi con riêng, vì vậy việc ghi vào một kiểu dữ liệu nguyên thủy sẽ tạo ra một bản sao cục bộ. Hãy ghi vào thuộc tính của đối tượng, chẳng hạn như... item.done.

Câu Hỏi Thường Gặp

Có, đang sử dụng ng-repeat="(key, value) in myObject"Lưu ý rằng AngularJS lặp lại các khóa đối tượng theo thứ tự đã sắp xếp, chứ không phải thứ tự chèn, vì vậy mảng sẽ an toàn hơn khi thứ tự là yếu tố quan trọng.

Nối các bộ lọc trong biểu thức, như trong ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Mảng gốc không bị thay đổi; chỉ có thứ tự hiển thị và tập con được thay đổi.

Vâng. AI công cụ ánh xạ ng-repeat tới *ngFor và track bởi đến tracCác hàm kBy. Hãy kiểm tra kỹ các bộ lọc, vì Angular đã cố tình loại bỏ các pipe filter và orderBy tích hợp sẵn.

Các công cụ AI phát hiện các lệnh gọi hàm bên trong biểu thức lặp lại, được chạy lại trên mỗi bản tóm tắt, và bỏ sót các lệnh gọi bị thiếu. track bởi các mệnh đề buộc phải xây dựng lại toàn bộ DOM. Cả hai đều là những nguyên nhân thường gặp khiến danh sách tải chậm.

Hãy sử dụng biểu mẫu bình luận. ng-repeat-start và ng-repeat-end, lặp lại một loạt các phần tử anh em. Điều này rất quan trọng trong các bảng, nơi một thẻ div thừa sẽ làm hỏng cấu trúc HTML.

Tóm tắt bài viết này với: