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>
<!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>
<!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>
<!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>
<!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>