Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 10-Bài 4. Cách sử dụng AngularJS Directive

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 6/3/2025, 4:41

Lượt xem: 491

AngularJS Directives

All directive: https://docs.angularjs.org/api AngularJS directives are extended HTML attributes with the prefix ng-. The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ví dụ đầu tiên AngularJS</title>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="quantity=2;price=2500">
        <p>Tên khách hàng: <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>

        Số lượng: <input type="number" ng-model="quantity"><br />
        Giá tiền: <input type="number" ng-model="price"><br />
        Tổng cộng: {{ quantity * price }}
    </div>
</body>
</html>

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ví dụ đầu tiên AngularJS</title>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="danhsachsanpham=[
            {tensanpham:'hoa lan',loai:'hoa tiệc cưới', gia: 5000},
            {tensanpham:'hoa hồng',loai:'hoa tình yêu', gia: 2000},
            {tensanpham:'hoa tươi',loai:'hoa văn phòng', gia: 3000}
        ]">

        <ul>
            <li ng-repeat="x in danhsachsanpham">
                {{ x.tensanpham + ', ' + x.loai + ': ' + x.gia }}
            </li>
        </ul>

    </div>
</body>
</html>

Về trang chủ Về Chương trình học

Bài học trước Bài học tiếp theo