Hướng dẫn về AngularJs onclick. Ở đây chúng ta thảo luận về cách thức hoạt động của chỉ thị ng-click trong AngularJS và các phần tử HTML khác nhau một cách chi tiết.

Bạn đang xem : ng nhấp vào anglejs

AngularJs onclick

Giới thiệu về AngularJs onclick

AngularJS ng-click là một chỉ thị AngularJS tích hợp chủ yếu được sử dụng để xử lý các sự kiện nhấp chuột trên chế độ xem HTML và xử lý dữ liệu trong bộ điều khiển theo yêu cầu. Lệnh ng-click có thể được sử dụng với nhiều phần tử HTML như nút, đầu vào, lựa chọn, hộp kiểm, v.v. Điều này cung cấp cho nhà phát triển khả năng xác định hành vi tùy chỉnh bất cứ khi nào một phần tử được nhấp. Trong chủ đề này, chúng ta sẽ tìm hiểu về AngularJs onclick.

Cú pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Có nhiều phần tử HTML khác nhau mà lệnh ng-click được sử dụng

Sử dụng ng-click với các loại đầu vào

  1. Div / span

& lt; div class = ”some-cutom-class” ng-click = ”customExpression” & gt; & lt; / input & gt;

  1. Img

& lt; img class = ”search-img” src = ”src-path-to-image“ ng-click = ”customExpression” & gt; & lt; / input & gt;

  1. Nút

& lt; button class = "btn-class" aria-label = "Cancel" type = "button" ng-click = "customExpression" & gt;

  1. đầu vào

& lt; input class = ”btn-class” type = ”button” ng-click = ”customExpression” & gt; & lt; / input & gt;

Sử dụng ng-click với textarea

& lt; textarea ng-click = ”customExpression” & gt; & lt; / textarea & gt;

Lệnh ng-click hoạt động như thế nào trong AngularJS?

Trong khuôn khổ AngularJS, điều rất quan trọng cần biết là tất cả các chỉ thị được xây dựng sẵn mà khuôn khổ AngularJS đã cung cấp sẽ luôn được biểu thị bằng tiền tố ng.

Các chức năng chỉ thị ng-click dựa trên sự kiện nhấp chuột, có nghĩa là ngay khi chế độ xem HTML trải qua một nhấp chuột (nhấp chuột) vào một phần tử HTML cụ thể, thì biểu thức ng-click tương ứng của nó sẽ được đánh giá. Biểu thức bên trong một chỉ thị ng-click có thể là một lệnh gọi hàm trong đó khai báo hàm trong bộ điều khiển; biểu thức cũng có thể được viết trực tiếp trong HTML view và được đánh giá ở đó. Một phương pháp hay là viết logic phức tạp bên trong một hàm được xác định trong bộ điều khiển và sau đó gọi hàm xem HTML. Lệnh ng-click sẽ theo dõi sự kiện onclick của trình duyệt và được kích hoạt bất cứ khi nào kích hoạt nhấp chuột. Lệnh ng-click được thực thi ở mức ưu tiên 0 và đối tượng Sự kiện có sẵn dưới dạng $ event.

Xem Thêm  Các loại chỉ mục trong SQL - index sql là gì

Ví dụ

Dưới đây được đề cập là một ví dụ về AngularJs onclick:

Index.html

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" & gt; & lt; / script & gt;
& lt; body ng-app = "myApp" & gt;
& lt; div ng-controller = "myCtrl" & gt;
& lt; h3 & gt; Giỏ hàng & lt; / h3 & gt;
& lt; div ng-repeat = "product in products" value = "{{product}}" & gt; {{product}}
& lt; button ng-click = "addProduct ()" & gt; Thêm & lt; / button & gt;
& lt; button ng-click = "removeProduct ()" & gt; Xóa & lt; / button & gt;
& lt; h & gt; & lt; br & gt;
& lt; / div & gt;
& lt; p & gt; Tổng số Sản phẩm đã chọn là = {{count}} & lt; / p & gt;
& lt; h3 & gt; Sử dụng hình ảnh & lt; / h3 & gt;
& lt; img ng-src = "{{imgSrc}}" ng-style = "imgSTyle" ng-click = "displayDetails ()" / & gt;
{{imgDetails}}
& lt; / div & gt;
& lt; script & gt;
angle.module ('myApp', [])
.controller ('myCtrl', ['$ scope', hàm ($ scope) {
$ scope.count = 0;
$ scope.addProduct = function () {
$ scope.count ++;
};
$ scope.removeProduct = function () {
$ scope.count--;
};
$ scope.displayDetails = function () {
$ scope.imgDetails = "Chi tiết về hình ảnh này";
}
$ scope.products = ["Sữa", "Bơ", "Bánh mì", "Nước trái cây", "Trái cây"];
$ scope.imgSrc = "https://img.freepik.com/free-photo/high-view-cup-coffee-table_23-2148251697.jpg?size=626&ext=jpg";
$ scope.imgSTyle = {
"heigth": "80px",
"width": "80px"
}
}]);
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Ví dụ trên cho thấy các cách khác nhau để sử dụng chỉ thị ng-click trong chế độ xem HTML trong ứng dụng AngularJS. Chúng tôi đã sử dụng các phần tử HTML khác nhau để giới thiệu việc sử dụng chỉ thị ng-click trong mẫu HTML. Lệnh này được sử dụng với các loại đầu vào khác nhau như nút, hộp kiểm, văn bản, điện thoại, email, v.v. và cũng được sử dụng để hiển thị các giá trị đã chọn từ menu thả xuống và vùng văn bản.

Xem Thêm  Tham số & Đối số trong JavaScript - đối số và tham số trong javascript

& lt; div ng-repeat = "product in products" value = "{{product}}" & gt;

Đây là ví dụ về danh sách các sản phẩm được lặp lại trong chế độ xem HTML bằng cách sử dụng ng-repeat bằng cách sử dụng sản phẩm trong các sản phẩm.

& lt; button ng-click = "addProduct ()" & gt ; Thêm & lt; / nút & gt;

Đây là một ví dụ về việc sử dụng lệnh ng-click với một phần tử HTML nút; bất cứ khi nào nút được nhấp trong chế độ xem HTML, thì hàm addProduct sẽ được thực thi

& lt; img ng-src = "{{imgSrc}}" ng-style = "imgSTyle" ng-click = "displayDetails ()" / & gt;

Đây là một ví dụ về việc sử dụng lệnh ng-click trong thẻ img bất cứ khi nào hình ảnh được nhấp vào thì chức năng hiển thị chi tiết sẽ được thực thi được xác định, bộ điều khiển

Đầu ra:

Đầu ra: 1 – Thêm và xóa các nút trong giỏ hàng

AngularJs onclick output 1

Kết quả 2: tổng số sản phẩm sau khi thêm 4 sản phẩm và xóa 1

AngularJs onclick output 2

Đầu ra 3: Sử dụng thẻ Hình ảnh

output 3

Đầu ra 4: Sau khi nhấp vào hình ảnh

output 4

Kết luận – AngularJs onclick

ng-click là một chỉ thị trong AngularJS có rất nhiều tầm quan trọng trong ứng dụng AngularJS. Chỉ thị này được sử dụng để xử lý sự kiện nhấp chuột. Biết vị trí và thời điểm ng-click sẽ được kích hoạt là rất quan trọng. Có nhiều thẻ HTML khác nhau mà chỉ thị này có thể được sử dụng.

Các bài báo được đề xuất

Đây là hướng dẫn về AngularJs onclick. Ở đây chúng ta thảo luận về cách thức hoạt động của chỉ thị ng-click trong AngularJS và các phần tử HTML khác nhau mà chỉ thị ng-click được sử dụng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Xem Thêm  Cách Căn trái, Phải & Căn giữa Văn bản trong HTML - cách căn chỉnh văn bản trong html trên cùng một dòng

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề nhấp chuột trong anglejs

Toggle div on button click in angular

alt

  • Tác giả: codippa
  • Ngày đăng: 2019-05-12
  • Đánh giá: 4 ⭐ ( 1833 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn 2 methods in which an element can be hidden or displayed in angular.

One moment, please…

  • Tác giả: websitehcm.com
  • Đánh giá: 4 ⭐ ( 1806 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sự kiện nhấp đúp chuột ondbclick trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 7490 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách dùng sự kiện nhấp đúp chuột ondbclick trong Javascript, hai cách thêm sự kiện nhấn đúp chuột gồm thêm bằng mã html và thêm bằng mã javascript

nghĩa trong tiếng Tiếng Anh

  • Tác giả: www.babla.vn
  • Đánh giá: 5 ⭐ ( 8330 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tra từ ‘nhấp chuột’ trong từ điển Tiếng Anh miễn phí và các bản dịch Anh khác.

Hướng dẫn và ví dụ Javascript MouseEvent

  • Tác giả: openplanning.net
  • Đánh giá: 4 ⭐ ( 8844 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Truy cập phần tử được nhấp trong angularjs

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1800 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Trong khi AngularJS cho phép bạn bắt tay vào một sự kiện nhấp chuột (và do…

Cách nhấp chuột phải trong AnyDesk trên PC hoặc thiết bị di động

  • Tác giả: reviewkhachsan.com
  • Đánh giá: 5 ⭐ ( 3370 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chương trình máy tính từ xa AnyDesk có thể được sử dụng để kết nối thiết bị di động với máy tính từ khá nhiều nơi. Khi chương trình đang chạy trên cả hai

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php