4
Trong bài viết này, chúng ta sẽ tìm hiểu về Chỉ thị trong Ứng dụng AngularJS. Trước khi bắt đầu, tôi khuyên bạn nên đọc các bài viết trước của tôi trong loạt bài này.
Chỉ thị là một trong những tính năng cốt lõi của AngularJS. Chỉ thị cho phép chúng tôi mở rộng HTML với các thuộc tính, thành phần và lớp mới. Chỉ thị được sử dụng cho Thao tác DOM, Liên kết dữ liệu, Chế độ xem tải, bắn sự kiện, v.v. Chúng tôi có thể định nghĩa Chỉ thị theo nhiều cách:
Một số chỉ thị như ng-view, vv có thể được sử dụng như một yếu tố tùy chỉnh.

Trong bài viết này, chúng ta sẽ thấy một số Chỉ thị AngularJS tích hợp. Trong loạt bài này, chúng ta đã thấy một số Chỉ thị như ng-app, ng-model, ng-controller, ng-bind, v.v., vì vậy, tôi sẽ không bao gồm chúng nữa.

1. ng-init : ng-init được sử dụng để khởi tạo các thuộc tính đặc biệt cho lệnh lặp lại ng và để tiêm dữ liệu qua ngôn ngữ kịch bản phía máy chủ trong ứng dụng AngularJS. Nên sử dụng bộ điều khiển để khởi tạo thuộc tính / mô hình trong ứng dụng AngularJS.

Thí dụ:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize Name property using ng-init Directive-->
    <div ng-init="Name='Anoop'">
        <h3>ng-init Example</h3>
        Name: <input type="text" ng-model="Name"/>
    </div>
</body>
</html>

Xem trước:

2. ng-repeat : lệnh lặp lại ng-lặp lại các phần tử HTML cho mỗi mục trong bộ sưu tập. Nó rất giống với vòng lặp foreach trong C # hoặc các ngôn ngữ lập trình khác.
Thí dụ:
<!DOCTYPE html>
<html>
<head>
    <title>Directive Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize Names property using ng-init Directive-->
    <div ng-init="Names=['Anoop','Akshay','Ajay','Abhishek','Arjun']">
        <h3>ng-repeat Example</h3>
        <ul>
            <!--ng-repeat directive repeats html elements for each item in a collection.-->
            <li ng-repeat="name in Names">{{name}}</li>
        </ul>
    </div>
</body>
</html>

Xem trước:

Ví dụ: Lấy dữ liệu từ Mảng đối tượng bằng ng-repeat.
<!DOCTYPE html>
<html>
<head>
    <title>Directive Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize Employees property using ng-init Directive-->
    <div ng-init="Employees=[
        { Name: 'Anoop', City: 'New Delhi' },
        { Name: 'Akshay', City: 'Mumbai' },
        { Name: 'Ajay', City: 'Punjab' },
        { Name: 'Arjun', City: 'Haryana' }
    ]">
        <h3>ng-repeat Example</h3>
        <table border="1" style="border-collapse:collapse">
            <tr><th>Name</th><th>City</th></tr>
            <!--ng-repeat directive repeats html elements for each item in a collection.-->
            <tr ng-repeat="Employee in Employees"><td>{{Employee.Name}}</td><td>{{Employee.City}}</td></tr>
        </table>
    </div>
</body>
</html>

Xem trước:



3. Chỉ thị ng-show / ng-hide : Chỉ thị ng-show / ng-hide cho phép chúng tôi hiển thị hoặc ẩn Phần tử HTML khác nhau dựa trên biểu thức được truyền cho lệnh đó.
Ví dụ về chỉ thị ng-show:
<!DOCTYPE html>
<html>
<head>
    <title>ngshow Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <h3>ng-show Example</h3>
    <!--Binding checkbox value with isVisible property using ng-model directive-->
    <input type="checkbox" ng-model="isVisible" /> Show Div
    <!--Here we pass isVisible expression to ng-show Directive-->
    <div ng-show="isVisible">
        Name: <input type="text" />
    </div>
</body>
</html>

Xem trước:


Ví dụ về chỉ thị ng-hide:
<!DOCTYPE html>
<html>
<head>
    <title>ng-hide Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <h3>ng-hide Example</h3>
    <!--Binding checkbox value with isHidden property using ng-model directive-->
    <input type="checkbox" ng-model="isHidden" /> Hide Div
    <!--Here we pass isHidden expression to ng-hide Directive-->
    <div ng-hide="isHidden">
        Name: <input type="text" />
    </div>
</body>
</html>

Xem trước:



4. ng-Click : ng-click chỉ thị cập nhật mô hình / thuộc tính của ứng dụng AngularJS khi nhấp vào một phần tử.
<!DOCTYPE html>
<html>
<head>
    <title>ngClick Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize count property using ng-init Directive-->
    <div ng-init="count=0">
        <h3>ng-click Example</h3>
        <!--Increasing and Decreasing the value of count expression using ng-click directive-->
        <button ng-click="count=count+1">Increase Value by 1</button> <button ng-click="count=count-1">Decrease Value by 1</button>
        <p>Count={{count}}</p>
    </div>
</body>
</html>

Xem trước:


Vui lòng truy cập https://docs.angularjs.org/api/ng/directive để đọc thêm về nhiều chỉ thị được xây dựng.
Hy vọng bạn thích nó. Cảm ơn!

|