AngularJS - Expressions - Amzuni - Học lập trình trực tuyến

AngularJS Expressions: Đánh giá và hiển thị dữ liệu

Expressions trong AngularJS là những đoạn mã JavaScript được đánh giá và hiển thị trong View. Chúng cung cấp một cách linh hoạt để hiển thị dữ liệu, thực hiện các phép tính và điều khiển logic trong ứng dụng.

Cú pháp

Expressions được đặt giữa dấu ngoặc kép đôi {{ và }}. Ví dụ:

HTML

<p>Giá trị của biến: {{ myVariable }}</p>

Các loại Expression

Biến: Hiển thị giá trị của một biến.
Phép tính: Thực hiện các phép toán số học, logic và so sánh.
Hàm: Gọi các hàm JavaScript.
Tệp tin: Đọc nội dung của một tệp tin.
Tương tác với DOM: Thay đổi thuộc tính của các element HTML.

Ví dụ

JavaScript

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.name = 'World';
    $scope.age = 30;
    $scope.isStudent = true;
    $scope.calculateAge = function() {
      return $scope.age + 5;
    };
  });

HTML

<div ng-app="myApp" ng-controller="MyController">
  <p>Xin chào, {{ name }}!</p>
  <p>Tuổi của bạn: {{ age }}</p>
  <p>Bạn có phải là sinh viên không? {{ isStudent }}</p>
  <p>Tuổi của bạn sau 5 năm: {{ calculateAge() }}</p>
</div>

Các tính năng của Expressions

Two-way data binding: Khi giá trị của một biến thay đổi, AngularJS sẽ tự động cập nhật View tương ứng.
Phép tính: Bạn có thể thực hiện các phép tính số học, logic và so sánh trong expressions.
Hàm: Bạn có thể gọi các hàm JavaScript để thực hiện các tác vụ phức tạp hơn.
Tệp tin: Bạn có thể đọc nội dung của một tệp tin và hiển thị nó trong View.
Tương tác với DOM: Bạn có thể thay đổi thuộc tính của các element HTML bằng expressions.

Lưu ý

Expressions không nên chứa các câu lệnh điều khiển như if, for, while. Để thực hiện các câu lệnh điều khiển, bạn nên sử dụng các directive như ng-if, ng-repeat.
Expressions không nên chứa các câu lệnh gán giá trị. Để gán giá trị cho một biến, bạn nên sử dụng các hàm trong controller.

Các ứng dụng của Expressions

Hiển thị dữ liệu từ Model.
Thực hiện các phép tính và hiển thị kết quả.
Điều khiển logic trong ứng dụng.
Tương tác với DOM.

AngularJS – Expressions