Expressions (biểu thức) trong AngularJS
Trong angularJS, khái niệm Expressions hay biểu thức cũng tương tự như trong javascript thuần, chúng ta có thể đưa biểu thức vào bên trong cấu trúc HTML thông qua 2 dấu ngoặc xoắn mở và đóng (double curly brackets) với cấu trúc như sau: {{expressions}}.
Expresions này thường hay sử dụng để có thể đưa dữ liệu được định nghĩa từ tầng controller vào bên trong html, ngoài ra chúng ta hoàn tooàn có thể đưa một biểu thức phép toán, biểu thức quan hệ, hằng số, hay là kết quả trả ra từ kết quả trả ra từ phương thức trong controller vào bên trong cấu trúc html để hiển thị kết quả.
Chúng ta đi tới ví dụ:
<!DOCTYPE html>
<html lang="en" ng-app="exampleviewApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example View AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-controller="mainController">
<h2>Hello {{name}}</h2>
<input type="text" ng-model="name" />
<p>
<strong>Example expression</strong>
<br/>
Bieu thuc so hoc {{2+2}}
<br/>
Bieu thuc quan he {{1==2}}
<br/>
Hang so {{5}}
<br/>
Du lieu trong controller {{name}}
<br/>
Du lieu trong controller {{arr[0]}}
<br/>
Su dung ng-bind directive de dua du lieu ra html <strong ng-bind="name"></strong>
<br/>
Su dung ng-bind directive de dua du lieu ra html <strong ng-bind="5+6"></strong>
<br/>
Su dung ng-bind directive de dua du lieu ra html <strong ng-bind="1==2"></strong>
</p>
</body>
<script>
var exampleviewApp = angular.module('exampleviewApp', []);
exampleviewApp.controller('mainController', function($scope) {
$scope.name = 'test';
$scope.arr = [2,3,4];
});
</script>
</html>Kết quả in ra trình duyệt:
Chúng ta cũng thể đưa expression vào bên trong thông qua directive ng-bind ( xem dòng số 26,28,30): <strong ng-bind=”name”></strong> …
Lưu ý: expression của angular cũng có một số hạn chế nhất định mặc dù nó khá tương đồng biểu thức javascript thông thường, ví dụ chúng không thể sử dụng cho biểu thức chính quy (regular expression), vòng lặp (loop), hay câu lệnh điều kiện (condition statements)
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
