Khái niệm cơ bản về Expression trong AngularJS

Admin
08-01-2017

Trong ứng dụng AngularJS chúng ta luôn cần sử dụng các Expression ( Biểu thức ). Vậy thì Expression là gì, AngularJS sử dụng nó ra sao? Chúng ta cùng tìm hiểu về nó trong bài viết này nhé.

- AngularJS liên kết dữ liệu sang HTML sử dụng các Expression. 

AngularJS Expression có thể được viết trong dấu ngoặc kép: {{ Expression }} .

AngularJS biểu thức cũng có thể được viết trong một directive (chỉ thị): ng-bind = "Expression".

AngularJS sẽ xử lý các biểu thức, và trả về kết quả chính xác nơi biểu thức được viết.

AngularJS Expression là giống như JavaScript Expression: Họ có thể chứa các chữ, toán tửcác biến.

Ví dụ:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">script>
<body>

<div ng-app>
<p>Biểu thức trong angularjs: {{ 5 + 5 }}p>
div>

body>
html>

Ta sẽ nhận được kết quả in ra màn hình là Biểu thức trong angularjs: 10

Nếu bạn loại bỏ các ng-app directive(chỉ thị), HTML sẽ hiển thị các biểu hiện như nó có, mà biến đổi gì cà:

==> Kết quả hiển thị Biểu thức trong angularjs: {{ 5 + 5 }}

Bạn có thể viết các biểu thức bất cứ nơi nào mà bạn thích, AngularJS chỉ đơn giản là sẽ xử lý các biểu thức và trả về kết quả.

Ví dụ: Sử dụng AngularJS để thay đổi giá trị của thuộc tính CSS.

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

div>

Trong đó: 
ng-app: khai báo 1 ứng dựng sử dụng angular JS
ng-init: khởi tạo biến trong Angular JS
ng-model: Liên kết giá trị của cấu trúc HTML với dữ liệu của Angular JS

Chúng ta cũng có thể sử dụng ng-bind thay thế cho dấu ngoặc nhọn
Ví dụ:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost">span>p>

div>

Trong ví dụ trên : 
chúng ta khai báo 2 biến Angular JS trong ng-init là quantity=1;cost=5
Kết quả trả về nhận được là Total in dollar:5

Chuỗi trong AngularJS
Chuỗi trong AngularJS cũng giống như Chuỗi trong JavaScript:

<div ng-app="" ng-init="Ho='Nguyễn';Ten='A'">
    <p>Họ và tên: {{ Ho + " " + Ten }}p>
div>

==> Kết quả hiển thị ra là Nguyễn A

Đối tượng trong AngularJS
Đối tượng trong AngularJS cũng giống như Đối tượng trong JavaScript:

<div ng-app="" ng-init="nguoi={ten:'John',ho:'Doe'}">
    <p>Tên: {{ nguoi.ten}}p>
div>

==> Kết quả hiển thị ra là Tên: John

Mảng trong AngularJS

Mảng trong AngularJS cũng giống như Mảng  trong JavaScript:

<div ng-app="" ng-init="points=[1,5,10,15,20]">
    <p>Tên: {{ points[1] }}p>
div>

==> Kết quả hiển thị ra là 5

Tổng kết: AngularJS Expressions là cách Angular JS xuất kết quả ra màn hình cho người dùng thấy, chúng ta có thể sử dụng dấu ngoặc kép {{  }} hoặc sử dụng ng-bind
Qua bài viết hy vọng các bản hiểu cơ bản về AngularJS Expressions. Chúc các bạn thành công!