JavaScript

AngularJS HTML DOM – Tìm hiểu về HTML DOM trong AngularJS

Posted on by Dục Đoàn Trình
Rate this post

AngularJS HTML DOM là một trong những tính năng quan trọng trong AngularJS. Nó cung cấp các công cụ để tương tác với các phần tử HTML trên trang web của bạn thông qua các đối tượng DOM (Document Object Model). Các đối tượng DOM này đại diện cho các phần tử HTML và cho phép bạn thực hiện các thao tác như thêm, sửa đổi và xóa các phần tử HTML trên trang web của bạn. Với AngularJS HTML DOM, bạn có thể dễ dàng thao tác với các phần tử HTML một cách thuận tiện và nhanh chóng.

Giới thiệu về HTML DOM trong AngularJS

HTML DOM trong AngularJS cung cấp các đối tượng để tương tác với các phần tử HTML trên trang web của bạn. HTML DOM được tạo ra bởi trình duyệt và có thể được sử dụng để thao tác với các phần tử HTML trên trang web của bạn thông qua các đối tượng như Document, Element và NodeList.

Trong AngularJS, bạn có thể sử dụng HTML DOM để truy cập các phần tử HTML trên trang web của bạn và thực hiện các thao tác như thêm, sửa đổi và xóa các phần tử này. HTML DOM cũng cung cấp các sự kiện để bạn có thể tương tác với các phần tử HTML này, như khi người dùng nhấn vào một nút hoặc điền vào một ô văn bản.

HTML DOM cũng hỗ trợ CSS, cho phép bạn thực hiện các thao tác CSS trên các phần tử HTML, như thay đổi màu sắc, kích thước và vị trí của chúng. Với HTML DOM trong AngularJS, bạn có thể kiểm soát hoàn toàn các phần tử HTML trên trang web của bạn và tạo ra các trang web động và tương tác cao.

Sử dụng HTML DOM trong AngularJS

Để sử dụng HTML DOM trong AngularJS, ta có thể sử dụng các directive như ng-show, ng-hide, ng-class, ng-style để thay đổi các thuộc tính của HTML DOM. Ví dụ, ta có thể sử dụng directive ng-show để ẩn hoặc hiện một phần tử HTML dựa trên giá trị của một biến trong AngularJS:

<div ng-show="isVisible">Nội dung sẽ được hiển thị nếu biến isVisible có giá trị true</div>

Ngoài ra, ta có thể sử dụng AngularJS để lắng nghe các sự kiện của HTML DOM như click, submit, change,… bằng cách sử dụng các directive như ng-click, ng-submit, ng-change,… Ví dụ:

<button ng-click="doSomething()">Click vào đây</button>
<form ng-submit="submitForm()">
  <input type="text" ng-model="formData.username">
  <input type="password" ng-model="formData.password">
  <button type="submit">Đăng nhập</button>
</form>

Ở đây, khi người dùng click vào button, phương thức doSomething() trong controller của AngularJS sẽ được gọi. Khi người dùng submit form, phương thức submitForm() trong controller sẽ được gọi và đối tượng formData sẽ chứa giá trị của các trường input.

Tạo mới HTML DOM trong AngularJS

Trong AngularJS, để tạo mới một phần tử HTML DOM, bạn có thể sử dụng directive ng-repeat. Directive này cho phép bạn tạo mới một phần tử HTML DOM bằng cách lặp lại một mảng dữ liệu.

Ví dụ, nếu bạn có một mảng dữ liệu các sinh viên như sau:

$scope.students = [
  { name: 'John', age: 20 },
  { name: 'Mary', age: 22 },
  { name: 'Peter', age: 18 }
];

Bạn có thể sử dụng directive ng-repeat để tạo mới các phần tử HTML DOM chứa thông tin của từng sinh viên trong mảng dữ liệu này như sau:

<ul>
  <li ng-repeat="student in students">
    {{ student.name }} - {{ student.age }}
  </li>
</ul>

Khi được biên dịch, AngularJS sẽ tạo mới các phần tử li tương ứng với số lượng phần tử trong mảng students và thay đổi nội dung của mỗi phần tử này theo dữ liệu trong từng đối tượng sinh viên.

Cập nhật và xóa HTML DOM trong AngularJS

Để cập nhật và xóa các phần tử HTML DOM trong AngularJS, chúng ta có thể sử dụng các directive có sẵn của AngularJS hoặc tạo custom directive để thực hiện các tác vụ này.

Để cập nhật một phần tử HTML DOM trong AngularJS, ta có thể sử dụng directive ng-bind, ng-model hoặc ng-bind-html. Ví dụ:

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Giá trị của biến message: <span ng-bind="message"></span></p>
  <input type="text" ng-model="message" />
</div>

Trong đoạn mã trên, chúng ta sử dụng directive ng-bind để hiển thị giá trị của biến message ra ngoài giao diện và sử dụng directive ng-model để liên kết giá trị của ô nhập liệu với biến message. Khi người dùng nhập giá trị vào ô nhập liệu, giá trị của biến message sẽ được cập nhật theo.

Để xóa một phần tử HTML DOM trong AngularJS, ta có thể sử dụng directive ng-if hoặc ng-show. Ví dụ:

<div ng-app="myApp" ng-controller="myCtrl">
  <p ng-if="showMessage">Đây là thông báo!</p>
  <button ng-click="showMessage = !showMessage">Ẩn/hiện thông báo</button>
</div>

Trong đoạn mã trên, chúng ta sử dụng directive ng-if để xác định xem phần tử p có hiển thị hay không. Khi giá trị của biến showMessage là true, phần tử p sẽ được hiển thị. Ngược lại, khi giá trị của biến showMessage là false, phần tử p sẽ bị xóa khỏi DOM.

Ngoài ra, ta cũng có thể sử dụng các method của AngularJS như $remove() để xóa một phần tử HTML DOM trong AngularJS. Tuy nhiên, việc sử dụng method này không được khuyến khích vì nó có thể gây ra những vấn đề về hiệu suất và quản lý mã.

Tương tác với HTML DOM trong AngularJS

Để tương tác với HTML DOM trong AngularJS, ta có thể sử dụng các Directive như ng-click, ng-dblclick, ng-mousedown, ng-mouseup, ng-mousemove, ng-mouseover, ng-mouseenter, ng-mouseleave, ng-change, ng-focus, ng-blur, v.v. Đây là các Directive được sử dụng để xử lý các sự kiện trên các phần tử HTML DOM.

Ví dụ, để bắt sự kiện click vào một button và thực hiện một hành động nào đó, ta có thể sử dụng Directive ng-click. Cú pháp của Directive này như sau:

<button ng-click="functionName()">Click me</button>

Trong đó, functionName() là tên của hàm xử lý sự kiện click. Khi button này được click, AngularJS sẽ gọi hàm functionName() để xử lý sự kiện.

Xem thêm AngularJS Forms – Hướng dẫn sử dụng Forms trong AngularJS

Ngoài ra, AngularJS còn cung cấp các Service để tương tác với HTML DOM như $window, $document, $location, $anchorScroll, v.v. Chúng được sử dụng để truy cập các phần tử HTML DOM, thao tác với các thẻ <a>, xử lý các sự kiện trên thanh địa chỉ, v.v.

Ví dụ, để truy cập đến phần tử HTML DOM có id là “myDiv”, ta có thể sử dụng Service $document như sau:

var myDiv = angular.element(document.querySelector('#myDiv'));

Sau đó, ta có thể thao tác với phần tử này bằng các phương thức của đối tượng myDiv, ví dụ:

myDiv.addClass('myClass');

Trong đó, addClass('myClass') là phương thức để thêm class “myClass” vào phần tử HTML DOM.

Các bài viết liên quan:

Directive

Các chỉ thị này là:

Chỉ thịSự miêu tả
ng-disabledNó vô hiệu hóa một điều khiển nhất định.
ng-showNó cho thấy một sự kiểm soát nhất định.
ng-hideNó ẩn một kiểm soát nhất định.
ng-clickNó đại diện cho một sự kiện nhấp chuột AangularJS.

Chỉ thị ng-disable: Chỉ thị ng-disable liên kết dữ liệu ứng dụng AngularJS với thuộc tính bị vô hiệu hóa của các phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<input type = "checkbox" ng-model = "enableDisableButton">
Disable Button  button 
ng-disabled = "enableDisableButton">Click Me!</button>

Chỉ thị ng-show: Chỉ thị ng-show hiển thị hoặc ẩn một phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<input type = "checkbox" ng
model = "showHide1">
Show Button  button ng
show = "showHide1">Click Me!</button>

Chỉ thị ng-hide: Chỉ thị ng-hide ẩn hoặc hiển thị một phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<input type = "checkbox" ng-model = "showHide2">
Hide Button  
<button ng-hide = "showHide2">Click Me!</button>

Chỉ thị ng-click: Chỉ thị ng-click đếm tổng số lần nhấp vào một phần tử HTML. Trong đoạn mã dưới đây, nó liên kết một mô hình với một hộp kiểm.

<p>Total click: {{ clickCounter }}</p>  
lt;button ng-click = "clickCounter = clickCounter + 1">
Click Me!</button>

Hãy lấy một ví dụ để triển khai tất cả các lệnh trên và kiểm tra các biến thể:

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<head>  
      <title>AngularJS HTML DOM</title>  
</head>  
<body>  
      <h2>Mẫu ứng dụng Application</h2>  
      <div ng-app = "">  
           <table border = "0">  
            <tr>  
               <td><input type = "checkbox" ng-model = "enableDisableButton">Nút tắt</td>  
               <td><button ng-disabled = "enableDisableButton">
Nhấp vào tôi!</button></td>  
            </tr>  
            <tr>  
               <td><input type = "checkbox" ng-model = "showHide1">
Hiển thị Tôi!</td>  
               <td><button ng-show = "showHide1">
Nhấp vào Tôi!</button></td>  
            </tr>  
             <tr>  
               <td><input type = "checkbox" ng-model = "showHide2">Hiển thị nút</td>  
               <td><button ng-hide = "showHide2">
Nhấp vào Tôi!</button></td>  
            </tr>  
             <tr>  
               <td><p>Tổng số lần nhấp: {{ clickCounter }}</p></td>  
               <td><button ng-click = "clickCounter = clickCounter + 1">
Nhấp vào Tôi!</button></td>  
            </tr>  
         </table>  
         </div>  
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
</body>  
</html>

Kết quả

Tổng kết về HTML DOM trong AngularJS

Trong bài viết này, chúng ta đã tìm hiểu về HTML DOM trong AngularJS, bao gồm cách sử dụng HTML DOM trong AngularJS, tạo mới HTML DOM trong AngularJS, cập nhật và xóa HTML DOM trong AngularJS, và tương tác với HTML DOM trong AngularJS. HTML DOM là một phần quan trọng của AngularJS, cho phép bạn tương tác với các phần tử HTML trong ứng dụng của mình. Khi sử dụng HTML DOM trong AngularJS, bạn có thể tạo ra các ứng dụng động và tương tác với các phần tử HTML một cách dễ dàng.

Trong AngularJS, một số chỉ thị có thể được sử dụng để liên kết dữ liệu ứng dụng với các thuộc tính của phần tử DOM HTML.

Xem thêm DOM trong JavaScript là gì ?

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now