Chương 4-Bài 4. Cách sử dụng AngularJS Directive
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng:
21/2/2025, 22:55
Lượt xem: 468
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>
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!