Sự kiện AngularJS: ng-click, ng-show, ng-hide (Ví dụ)

Mục lục:

Anonim

Khi tạo các ứng dụng dựa trên web, sớm hay muộn ứng dụng của bạn sẽ cần xử lý các sự kiện DOM như nhấp chuột, di chuyển, nhấn bàn phím, thay đổi sự kiện, v.v.

AngularJS có thể thêm chức năng có thể được sử dụng để xử lý các sự kiện như vậy.

Ví dụ: nếu có một nút trên trang và bạn muốn xử lý nội dung nào đó khi nút được nhấp, chúng ta có thể sử dụng chỉ thị sự kiện ng-click.

Chúng tôi sẽ xem xét chi tiết các chỉ thị Sự kiện trong khóa học này.

Trong hướng dẫn này, bạn sẽ học-

  • Chỉ thị ng-click là gì?
  • Chỉ thị ng-show là gì?
  • Chỉ thị ng-hide là gì?

Chỉ thị ng-click là gì?

Các "ng nhấp chuột chỉ thị" được sử dụng để áp dụng hành vi tùy chỉnh để khi một phần tử trong HTML nhấp vào. Điều này thường được sử dụng cho các nút vì đó là nơi phổ biến nhất để thêm các sự kiện phản hồi các nhấp chuột do người dùng thực hiện

Hãy xem một ví dụ đơn giản về cách chúng ta có thể triển khai sự kiện nhấp chuột.

Trong ví dụ này, chúng ta sẽ có một biến bộ đếm sẽ tăng giá trị khi người dùng nhấp vào một nút.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Giải thích mã:

  1. Đầu tiên, chúng tôi sử dụng chỉ thị ng-init để đặt giá trị của một số biến cục bộ thành 0.
  2. Sau đó, chúng tôi sẽ giới thiệu chỉ thị sự kiện ng-click vào nút. Trong chỉ thị này, chúng tôi đang viết mã để tăng giá trị của biến đếm lên 1.
  3. Ở đây chúng tôi đang hiển thị giá trị của biến đếm cho người dù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.

Đầu ra:

Từ kết quả trên,

  • Chúng ta có thể thấy rằng nút "Tăng dần" được hiển thị và giá trị của biến đếm ban đầu bằng không.
  • Khi bạn nhấp vào nút Tăng, giá trị của số đếm được tăng lên tương ứng như thể hiện trong hình ảnh đầu ra bên dưới.

Chỉ thị ng-show là gì?

Chỉ thị ng-Show được sử dụng để hiển thị hoặc ẩn một phần tử HTML nhất định dựa trên biểu thức được cung cấp cho thuộc tính ngShow. Trong nền, phần tử được hiển thị hoặc ẩn bằng cách xóa hoặc thêm lớp CSS .ng-hide vào phần tử.

Trong nền, phần tử được hiển thị hoặc ẩn bằng cách xóa hoặc thêm lớp CSS .ng-hide vào phần tử.

Hãy xem một ví dụ về cách chúng ta có thể sử dụng chỉ thị "sự kiện ngshow" để hiển thị một phần tử ẩn.

Event Registration

Guru99 Global Event




Angular

Giải thích mã:

  1. Chúng tôi đang đính kèm chỉ thị sự kiện ng-click vào phần tử nút. Ở đây, chúng tôi đang tham chiếu đến một hàm có tên "ShowHide" được định nghĩa trong bộ điều khiển của chúng tôi - DemoController.
  2. Chúng tôi đang đính kèm thuộc tính ng-show vào thẻ div có chứa văn bản Angular. Đây là thẻ mà chúng ta sẽ hiển thị / ẩn dựa trên thuộc tính ng-show.

  3. Trong bộ điều khiển, chúng tôi đang gắn biến thành viên "IsVible" vào đối tượng phạm vi. Thuộc tính này sẽ được chuyển cho thuộc tính góc ng-show (bước # 2) để kiểm soát khả năng hiển thị của điều khiển div. Ban đầu chúng tôi đặt giá trị này thành false để khi trang được hiển thị lần đầu tiên, thẻ div sẽ bị ẩn.

    Lưu ý: - Khi các thuộc tính ng-show được đặt thành true, điều khiển tiếp theo mà trong trường hợp của chúng ta là thẻ div sẽ được hiển thị cho người dùng. Khi thuộc tính ng-show được đặt thành false, điều khiển sẽ bị ẩn khỏi người dùng.

  4. Chúng tôi đang thêm mã vào hàm ShowHide, hàm này sẽ đặt biến thành viên có thể phân chia thành true để thẻ div có thể được hiển thị cho người dù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.

Đầu ra: 1

Từ đầu ra,

  • Ban đầu, bạn có thể thấy rằng thẻ div có văn bản "AngularJS" không được hiển thị và điều này là do đối tượng phạm vi có thể chia sẻ ban đầu được đặt thành false, sau đó được chuyển đến chỉ thị ng-show của thẻ div.
  • Khi bạn nhấp vào nút "Hiển thị AngularJS", nó sẽ thay đổi biến thành viên có thể chia sẻ thành true và do đó văn bản "Angular" sẽ hiển thị cho người dùng. Kết quả bên dưới sẽ được hiển thị cho người dùng.

Đầu ra bây giờ hiển thị thẻ div với văn bản Angular.

Chỉ thị ng-hide là gì?

Với chỉ thị ng-hide, một phần tử sẽ bị ẩn nếu biểu thức là TRUE. Nếu Biểu thức là FALSE, phần tử sẽ được hiển thị. Trong nền, phần tử được hiển thị hoặc ẩn bằng cách xóa hoặc thêm lớp CSS .ng-hide vào phần tử.

Mặt khác với ng-hide, phần tử bị ẩn nếu biểu thức là true và nó sẽ được hiển thị nếu nó là false.

Hãy xem ví dụ tương tự như ví dụ được hiển thị cho ngShow để giới thiệu cách sử dụng thuộc tính ngHide.

Event Registration

Guru99 Global Event




Angular

Giải thích mã:

  1. Chúng tôi đang đính kèm chỉ thị sự kiện ng-click vào phần tử nút. Ở đây, chúng tôi đang tham chiếu đến một hàm có tên là ShowHide được định nghĩa trong bộ điều khiển của chúng tôi - DemoController.
  2. Chúng tôi đang đính kèm thuộc tính ng-hide vào thẻ div có chứa văn bản Angular. Đây là thẻ mà chúng ta sẽ hiển thị / ẩn dựa trên thuộc tính ng-show.
  3. Trong bộ điều khiển, chúng tôi đang gắn biến thành viên isVible vào đối tượng phạm vi. Thuộc tính này sẽ được chuyển cho thuộc tính ng-show angle để điều khiển khả năng hiển thị của điều khiển div. Ban đầu chúng tôi đặt giá trị này thành false để khi trang được hiển thị lần đầu tiên, thẻ div sẽ bị ẩn.
  4. Chúng tôi đang thêm mã vào hàm ShowHide, hàm này sẽ đặt biến thành viên có thể phân chia thành true để thẻ div có thể được hiển thị cho người dù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.

Đầu ra:

Từ đầu ra,

  • Ban đầu bạn có thể thấy rằng thẻ div có văn bản "AngularJs" được hiển thị ban đầu vì giá trị thuộc tính false được gửi đến chỉ thị ng-hide.
  • Khi chúng ta nhấp vào nút "Hide Angular", giá trị thuộc tính true sẽ được gửi đến chỉ thị ng-hide. Do đó đầu ra bên dưới sẽ được hiển thị, trong đó từ "Angular" sẽ bị ẩn.

Hướng dẫn trình xử lý sự kiện AngularJS

Bạn có thể thêm trình xử lý sự kiện AngularJS vào các phần tử HTML của mình bằng cách sử dụng một hoặc nhiều lệnh sau:

  • ng-mờ
  • ng-thay đổi
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Tóm lược

  • Chỉ thị sự kiện được sử dụng trong Angular để thêm mã tùy chỉnh nhằm phản hồi các sự kiện được tạo ra bởi sự can thiệp của người dùng như nhấp vào nút, nhấp chuột và bàn phím, v.v.
  • Chỉ thị sự kiện phổ biến nhất là chỉ thị ng-click được sử dụng để xử lý các sự kiện nhấp chuột. Cách sử dụng phổ biến nhất của điều này là cho các lần nhấp vào nút, trong đó mã có thể được thêm vào để phản hồi một lần nhấp vào nút.
  • Các phần tử HTML cũng có thể được ẩn hoặc hiển thị cho người dùng tương ứng bằng cách sử dụng các thuộc tính góc ng-show và ng-hide.