Biểu thức AngularJS: ARRAY, Đối tượng, $eval, Chuỗi [Ví dụ]
James Hartman
Biểu thức JS góc là gì?
Biểu thức là các biến được định nghĩa trong cặp dấu ngoặc kép {{ }}. Chúng được sử dụng rất phổ biến trong Angular JS và bạn sẽ thấy chúng trong các hướng dẫn trước đây của chúng tôi.
Giải thích các biểu thức Angular.js bằng một ví dụ
Biểu thức AngularJS là những biểu thức được viết bên trong cặp dấu ngoặc kép {{expression}}.
Cú pháp:
Một ví dụ đơn giản về biểu thức là {{5 + 6}}.
Các biểu thức Angular.JS được sử dụng để liên kết dữ liệu với HTML giống như lệnh ng-bind. AngularJS hiển thị dữ liệu chính xác tại nơi đặt biểu thức.
Hãy xem một ví dụ về biểu thức Angular.JS.
Trong ví dụ này, chúng tôi chỉ muốn hiển thị phép cộng số đơn giản dưới dạng biểu thức.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Giải thích mã:
- Lệnh ng-app trong ví dụ của chúng tôi trống như trong ảnh chụp màn hình ở trên. Điều này chỉ có nghĩa là không có mô-đun nào để gán bộ điều khiển, chỉ thị, dịch vụ kèm theo mã.
- Chúng tôi đang thêm một biểu thức đơn giản để xem xét việc cộng 2 số.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy phép cộng của hai số 9 và 6 diễn ra và hiển thị giá trị cộng 15.
Góc cạnh.JS Numbers
Biểu thức cũng có thể được sử dụng để làm việc với các con số. Hãy xem một ví dụ về biểu thức Angular.JS với các con số.
Trong ví dụ này, chúng tôi chỉ muốn hiển thị phép nhân đơn giản của 2 biến số được gọi là ký quỹ và lợi nhuận và hiển thị giá trị nhân của chúng.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="margin=2;profit=200">
Total profit margin
{{margin*profit}}
</div>
</body>
</html>
Giải thích mã:
- Lệnh ng-init được sử dụng trong Angular.js để xác định các biến và giá trị tương ứng của chúng trong chính khung nhìn. Nó giống như việc xác định các biến cục bộ để mã hóa trong bất kỳ ngôn ngữ lập trình. Trong trường hợp này, chúng tôi đang xác định 2 biến được gọi là ký quỹ và lợi nhuận và gán giá trị cho chúng.
- Sau đó, chúng tôi sử dụng 2 biến cục bộ và nhân giá trị của chúng.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ rằng phép nhân của 2 số 2 và 200 diễn ra và hiển thị giá trị nhân của 400.
Chuỗi AngularJS
Biểu thức cũng có thể được sử dụng để làm việc với chuỗi. Hãy xem một ví dụ về biểu thức Angular JS với chuỗi.
Trong ví dụ này, chúng ta sẽ định nghĩa 2 chuỗi “firstName” và “lastName” và hiển thị chúng bằng các biểu thức tương ứng.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="firstName='Guru';lastName='99'">
First Name : {{firstName}}<br>
last Name : {{lastName}}
</div>
</body>
</html>
Giải thích mã:
- Lệnh ng-init được sử dụng để xác định các biến firstName có giá trị “Guru” và biến LastName có giá trị “99”.
- Sau đó, chúng tôi sử dụng các biểu thức của {{firstName}} và {{lastName}} để truy cập giá trị của các biến này và hiển thị chúng trong dạng xem tương ứng.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ kết quả đầu ra, có thể thấy rõ các giá trị của FirstName và LastName được hiển thị trên màn hình.
Đối tượng Angular.JS
Biểu thức có thể được sử dụng để làm việc với JavaScript các đồ vật cũng vậy.
Hãy xem một ví dụ về biểu thức Angular.JS với các đối tượng javascript. Đối tượng javascript bao gồm một cặp tên-giá trị.
Dưới đây là ví dụ về cú pháp của đối tượng javascript.
Cú pháp:
var car = {type:"Ford", model:"Explorer", color:"White"};
Trong ví dụ này, chúng ta sẽ định nghĩa một đối tượng là đối tượng người sẽ có 2 cặp giá trị khóa là “firstName” và “lastName”.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
First Name : {{person.firstName}}<br>
Last Name : {{person.lastName}}
</div>
</body>
</html>
Giải thích mã:
- Lệnh ng-init được sử dụng để xác định đối tượng Person có cặp giá trị khóa FirstName với giá trị “Guru” và biến LastName có giá trị “99”.
- Sau đó, chúng tôi sử dụng các biểu thức của {{person.firstName}} và {{person.secondName}} để truy cập giá trị của các biến này và hiển thị chúng trong chế độ xem tương ứng. Vì các biến thành viên thực tế là một phần của đối tượng nên chúng phải truy cập nó bằng ký hiệu dấu chấm (.) để truy cập giá trị thực của chúng.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ đầu ra,
- Có thể thấy rõ rằng các giá trị của “firstName” và “secondName” được hiển thị trên màn hình.
Mảng AngularJS
Biểu thức cũng có thể được sử dụng để làm việc với mảng. Hãy xem một ví dụ về biểu thức Angular JS với mảng.
Trong ví dụ này, chúng ta sẽ xác định một mảng sẽ chứa điểm của một học sinh trong 3 môn học. Trong dạng xem, chúng tôi sẽ hiển thị giá trị của các nhãn hiệu này cho phù hợp.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="marks=[1,15,19]">
Student Marks<br>
Subject1 : {{marks[0] }}<br>
Subject2 : {{marks[1] }}<br>
Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>
Giải thích mã:
- Lệnh ng-init được sử dụng để xác định mảng có tên “marks” với 3 giá trị 1, 15 và 19.
- Sau đó, chúng tôi sử dụng biểu thức dấu [chỉ mục] để truy cập từng phần tử của mảng.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Từ kết quả đầu ra, có thể thấy rõ rằng các dấu đang được hiển thị, được xác định trong mảng.
Các khả năng và hạn chế của biểu thức AngularJS
Khả năng biểu thức Angular.JS
- Biểu thức góc giống như JavaBiểu thức chữ viết. Do đó, nó có cùng sức mạnh và tính linh hoạt.
- In JavaScript, khi bạn cố gắng đánh giá các thuộc tính không xác định, nó sẽ tạo ra ReferenceError hoặc TypeError. Trong Angular, việc đánh giá biểu thức rất dễ dàng và tạo ra undefined hoặc null.
- Người ta có thể sử dụng các bộ lọc trong biểu thức để định dạng dữ liệu trước khi hiển thị nó.
Các hạn chế của biểu thức JS góc
- Hiện tại không có sẵn để sử dụng các điều kiện, vòng lặp hoặc ngoại lệ trong biểu thức Góc
- Bạn không thể khai báo các hàm trong biểu thức Angular, ngay cả trong lệnh ng-init.
- Người ta không thể tạo biểu thức chính quy trong biểu thức Angular. Biểu thức chính quy là sự kết hợp của các ký hiệu và ký tự được dùng để tìm các chuỗi như .*\.txt$. Các biểu thức như vậy không thể được sử dụng trong các biểu thức Angular JS.
- Ngoài ra, người ta không thể sử dụng hoặc vô hiệu hóa trong biểu thức Angular.
Sự khác biệt giữa biểu thức và $eval
Hàm $eval cho phép người ta đánh giá các biểu thức từ bên trong bộ điều khiển. Vì vậy, trong khi các biểu thức được sử dụng để đánh giá trong dạng xem thì $eval được sử dụng trong hàm điều khiển.
Hãy xem một ví dụ đơn giản về điều này.
Trong ví dụ này,
Chúng ta sẽ sử dụng hàm $eval để cộng 2 số và làm cho nó có sẵn trong đối tượng phạm vi để nó có thể được hiển thị trong dạng xem.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController',function($scope){
$scope.a=1;
$scope.b=1;
$scope.value=$scope.$eval('a+b');
});
</script>
</body>
</html>
Giải thích mã:
- Đầu tiên chúng ta xác định 2 biến 'a' và 'b', mỗi biến có giá trị là 1.
- Chúng tôi đang sử dụng hàm $scope.$eval để đánh giá việc cộng 2 biến và gán nó cho biến phạm vi 'value'.
- Sau đó chúng tôi chỉ hiển thị giá trị của biến 'value' trong dạng xem.
Nếu mã được thực thi thành công, kết quả sau sẽ hiển thị khi bạn chạy mã trên trình duyệt.
Đầu ra:
Đầu ra ở trên cho thấy đầu ra của biểu thức được đánh giá trong điều khiển. Kết quả trên cho thấy biểu thức $eval được sử dụng để thực hiện phép cộng 2 biến phạm vi 'a và b' với kết quả được gửi và hiển thị trong dạng xem.
Tổng kết
- Chúng ta đã thấy cách biểu đạt trong Góc cạnh có thể được sử dụng để đánh giá thường xuyên JavaCác biểu thức giống như chữ viết chẳng hạn như phép cộng số đơn giản.
- Lệnh ng-init có thể được sử dụng để xác định các biến nội tuyến có thể được sử dụng trong dạng xem.
- Biểu thức có thể được tạo để hoạt động với các kiểu nguyên thủy như chuỗi và số.
- Biểu thức cũng có thể được sử dụng để làm việc với các loại khác như JavaĐối tượng kịch bản và mảng.
- Các biểu thức trong Angular JS có một số hạn chế, chẳng hạn như không có biểu thức chính quy hoặc sử dụng các hàm, vòng lặp hoặc câu lệnh điều kiện.
