Chỉ thị ng-lặp AngularJS với ví dụ

Mục lục:

Anonim

Hiển thị thông tin lặp lại

Đôi khi chúng tôi có thể được yêu cầu hiển thị danh sách các mục trong chế độ xem, vì vậy câu hỏi đặt ra là làm thế nào chúng ta có thể hiển thị danh sách các mục được xác định trong bộ điều khiển của chúng tôi trên trang xem của chúng tôi.

Angular cung cấp một chỉ thị được gọi là "ng-repeat" có thể được sử dụng để hiển thị các giá trị lặp lại được xác định trong bộ điều khiển của chúng tôi.

Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Giải thích mã:

  1. Trong bộ điều khiển, trước tiên chúng ta xác định mảng các mục danh sách mà chúng ta muốn xác định trong dạng xem. Ở đây, chúng tôi đã xác định một mảng có tên "TopicNames" chứa ba mục. Mỗi mục bao gồm một cặp tên-giá trị.
  2. Mảng TopicsNames sau đó được thêm vào một biến thành viên được gọi là "chủ đề" và được gắn vào đối tượng phạm vi của chúng tôi.
  3. Chúng tôi đang sử dụng các thẻ HTML của
      (Danh sách không có thứ tự) và
    • (Mục danh sách) để hiển thị danh sách các mục trong mảng của chúng tôi. Sau đó, chúng tôi sử dụng chỉ thị ng-repeat để xem qua từng mục trong mảng của chúng tôi. Từ "tpname" là một biến được sử dụng để trỏ đến từng mục trong các chủ đề mảng.
    • Trong phần này, chúng tôi sẽ hiển thị giá trị của từng mục mảng.

Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt. Bạn sẽ thấy tất cả các mục của mảng (Về cơ bản là TopicName trong các chủ đề) được hiển thị.

Đầu ra:

Angularjs Multiple Controllers

Một ví dụ về bộ điều khiển nâng cao sẽ là khái niệm có nhiều bộ điều khiển trong một ứng dụng JS góc cạnh.

Bạn có thể muốn xác định nhiều bộ điều khiển để tách các chức năng logic nghiệp vụ khác nhau. Trước đó chúng ta đã đề cập đến việc có các phương thức khác nhau trong bộ điều khiển, trong đó một phương thức có chức năng cộng và trừ các số riêng biệt. Chà, bạn có thể có nhiều bộ điều khiển để có sự phân tách logic nâng cao hơn. Ví dụ, bạn có thể có một bộ điều khiển chỉ hoạt động trên các số và bộ điều khiển kia thực hiện các hoạt động trên chuỗi.

Hãy xem một ví dụ về cách chúng ta có thể xác định nhiều bộ điều khiển trong một ứng dụng angle.JS.

Event Registration


Guru99 Global Event


{{lname}}

Giải thích mã:

  1. Ở đây chúng ta đang định nghĩa 2 bộ điều khiển được gọi là "firstController" và "secondController". Đối với mỗi bộ điều khiển, chúng tôi cũng đang thêm một số mã để xử lý. Trong firstController của chúng tôi, chúng tôi đính kèm một biến có tên là "pname" có giá trị "firstController" và trong secondController, chúng tôi đính kèm một biến có tên "lname" có giá trị "secondController".
  2. Theo quan điểm, chúng tôi đang truy cập cả hai bộ điều khiển và sử dụng biến thành viên từ bộ điều khiển thứ hai.

Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt. Bạn sẽ thấy tất cả văn bản của "secondController" như mong đợi.

Đầu ra:

Tóm lược

  • Chỉ thị ng-repeater có thể được sử dụng để hiển thị nhiều mục lặp lại.
  • Chúng tôi cũng đã xem xét một bộ điều khiển nâng cao xem xét định nghĩa của nhiều bộ điều khiển trong một ứng dụng.