Expression trong AngularJS

Expression được sử dụng để gắn kết các dữ liệu ứng dụng ra thẻ HTML. Expression được viết trong dấu {{ expression}}. Expression có cách hoạt động tương đối giống ng-bind directive. Các expression trong ứng dụng AngularJS là các JavaScript expression thuần túy và xuất kết quả là dữ liệu mà chúng ta sử dụng.

Sử dụng số trong Expression trong AngularJS:

<p>Giá sách : {{cost * quantity}}.000 VNĐ</p>

Sử dụng chuỗi trong Expression trong AngularJS:

<p>Xin chào {{student.firstname + " " + student.lastname}}!</p>

Sử dụng đối tượng trong Expression trong AngularJS:

<p>Mã số sinh viên: {{student.rollno}}</p>

Sử dụng mảng trong Expression trong AngularJS:

<p>Điểm thi (Môn Tin): {{marks[3]}}</p>

Ví dụ: 

Dưới đây là ví dụ cho các expression mô tả bên trên:

viduExpression.html

<html>

<head>
<title>Ví dụ về Expressions trong AngularJS</title>
</head>

<body>
<h1>Ứng dụng QTM</h1>

<div ng-app = "" ng-init = "quantity = 1;cost = 30; student = {firstname:'Quan Tri',lastname:'Mang',rollno:101};marks = [80,90,75,73,60]">
<p>Xin chào {{student.firstname + " " + student.lastname}}!</p>
<p>Giá sách : {{cost * quantity}}.000 VNĐ</p>
<p>Mã số sinh viên: {{student.rollno}}</p>
<p>Điểm thi (Môn Tin): {{marks[3]}}</p>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</body>
</html>

Kết quả

Mở trang viduExpression.html trên trình duyệt web và xem kết quả dưới đây.

Kết quả sau khi chạy ứng dụng Angular

Theo Tutorialspoint

Bài trước: Các Directive trong AngularJS

Bài tiếp: Thành phần Controller trong AngularJS

Thứ Sáu, 03/08/2018 16:03
51 👨 39