AngularJS Directives
All directive: https://docs.angularjs.org/api AngularJS directives are extended HTML attributes with the prefixng-.
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
Theng-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>
Chương trình học
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
Bài học trước Bài học tiếp theo