Expression trong AngularJS

Minh Nguyen

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ứ Tư, 25/07/2018 16:38

5 ★ 1 👨 280

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!