Biểu thức AngularJS: Mảng, Đối tượng, $eval, Chuỗi
James Hartman
⚡ Tóm tắt thông minh
Biểu thức AngularJS là các đoạn mã được đặt bên trong dấu ngoặc kép, liên kết dữ liệu trực tiếp vào mẫu. Chúng đánh giá các số, chuỗi, đối tượng và mảng, và hàm `$eval` thực hiện việc đánh giá tương tự từ bên trong bộ điều khiển.
Biểu thức AngularJS là gì?
Biểu thức là các biến được viết bên trong dấu ngoặc kép. {{ }}Chúng được sử dụng rất phổ biến trong AngularJS và xuất hiện xuyên suốt các bài hướng dẫn trước đó trong loạt bài này.
⚠️ Thông báo hỗ trợ: AngularJS đã đạt đến Hết hạn sử dụng vào ngày 31 tháng 12 năm 2021. và không nhận được thêm bản vá lỗi hoặc bản sửa lỗi bảo mật nào nữa. Cú pháp bên dưới vẫn chính xác để duy trì các ứng dụng AngularJS 1.x hiện có; các dự án mới nên sử dụng cú pháp hiện đại. có góc cạnh, nơi mà dấu ngoặc nội suy vẫn tồn tại nhưng ng-init và $eval đừng.
Giải thích biểu thức AngularJS bằng một ví dụ.
Các biểu thức trong AngularJS được viết bên trong dấu ngoặc kép, như trong ví dụ sau: {{expression}}.
Cú pháp: Một ví dụ đơn giản về biểu thức là {{5 + 6}}.
Biểu thức trong AngularJS liên kết dữ liệu với HTML theo cùng một cách như chỉ thị ng-bind, và AngularJS hiển thị dữ liệu chính xác tại vị trí biểu thức được đặt.
Trong ví dụ này, chúng ta sẽ trình bày phép cộng đơn giản các số dưới dạng một biểu thức.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script> <h1>Guru99 Global Event</h1> <div ng-app=""> Addition : {{6+9}} </div> </body> </html>
Code Giải thích:
- Chỉ thị ng-app trống, điều này có nghĩa là không có mô-đun nào cung cấp bộ điều khiển. chỉ thịhoặc các dịch vụ liên quan đến trang này.
- Một phép cộng đơn giản cho hai số.
Đầu ra:
Phép cộng 9 và 6 được thực hiện và kết quả là 15.
AngularJS Numbers
Biểu thức hoạt động với các số. Ví dụ này nhân hai biến số, margin và profitvà hiển thị sản phẩm.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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>
Code Giải thích:
- Chỉ thị `ng-init` định nghĩa các biến và giá trị của chúng trong chính view, tương tự như các biến cục bộ trong bất kỳ ứng dụng nào khác. ngôn ngữ lập trình. Đây
marginvàprofitđược khai báo và gán. - Biểu thức đó sau đó nhân hai biến cục bộ đó với nhau.
Đầu ra:
Phép nhân giữa 2 và 200 được thực hiện và kết quả là 400.
Chuỗi AngularJS
Biểu thức cũng hoạt động với chuỗi ký tự. Ví dụ này định nghĩa... firstName và lastName và hiển thị cả hai.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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>
Code Giải thích:
- Chỉ thị ng-init định nghĩa
firstNamevới giá trị “Guru"VàlastNamevới giá trị “99”. - Các biểu thức
{{firstName}}và{{lastName}}Đọc các biến đó và hiển thị chúng trong giao diện.
Đầu ra:
Cả hai giá trị đều hiển thị trên màn hình.
Đối tượng AngularJS
Biểu thức hoạt động với JavaScript các đối tượng, bao gồm các cặp tên-giá trị. Cú pháp của một JavaĐối tượng kịch bản trông như thế này:
var car = {type: "Ford", model: "Explorer", color: "White"};
Ví dụ này định nghĩa một person Đối tượng chứa hai cặp khóa-giá trị. firstName và lastName.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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>
Code Giải thích:
- Chỉ thị ng-init định nghĩa đối tượng
personvới các cặp khóa-giá trịfirstNameđặt thành “Guru"VàlastNameđặt thành “99”. - Các biểu thức
{{person.firstName}}và{{person.lastName}}Đọc các thành viên đó. Vì chúng thuộc về đối tượng, nên cần sử dụng ký hiệu dấu chấm để truy cập giá trị của chúng.
Đầu ra:
Các giá trị của firstName và lastName xuất hiện trên màn hình.
Mảng AngularJS
Biểu thức hoạt động với mảng. Ví dụ này định nghĩa một mảng chứa điểm số của học sinh trong ba môn học và hiển thị từng giá trị.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/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]}} </div> </body> </html>
Code Giải thích:
- Chỉ thị ng-init định nghĩa mảng
marksvới ba giá trị 1, 15 và 19. - Các biểu hiện của hình thức
marks[index]Đọc từng phần tử.
Đầu ra:
Các dấu hiệu được định nghĩa trong mảng sẽ được hiển thị.
Các khả năng và hạn chế của biểu thức AngularJS
DỊCH VỤ
- Các biểu thức AngularJS tương tự như vậy. JavaCác biểu thức kịch bản có chung nhiều sức mạnh và tính linh hoạt.
- Ở đâu JavaĐoạn mã sẽ báo lỗi ReferenceError hoặc TypeError nếu thuộc tính không được định nghĩa, trong khi quá trình đánh giá của AngularJS khá dễ dãi và trả về giá trị undefined hoặc null.
- Bạn có thể áp dụng các bộ lọc bên trong một biểu thức để định dạng dữ liệu trước khi hiển thị.
- Toán tử ba ngôi được hỗ trợ, vì vậy
{{ isReady ? 'Yes' : 'No' }}là hợp lệ.
Hạn chế
- Không thể sử dụng vòng lặp và xử lý ngoại lệ bên trong biểu thức AngularJS. Logic điều kiện chỉ giới hạn ở toán tử ba ngôi;
ifHiện chưa có thông tin về báo cáo. - Không thể khai báo hàm trong một biểu thức, ngay cả bên trong chỉ thị ng-init.
- Biểu thức chính quy không thể được tạo bên trong một biểu thức khác. Biểu thức chính quy là sự kết hợp của các ký hiệu và ký tự được sử dụng để khớp với các chuỗi, chẳng hạn như:
.*\.txt$và những cách hiểu theo nghĩa đen như vậy bị bác bỏ. - Toán tử dấu phẩy (
,) VàvoidNgười điều hành không được phép.
ng-bind so với dấu ngoặc nhọn biểu thức: Nên sử dụng cái nào?
Double Cả dấu ngoặc nhọn và chỉ thị ng-bind đều tạo ra cùng một kết quả hiển thị, vì vậy việc lựa chọn giữa chúng có vẻ tùy ý. Nhưng thực tế không phải vậy. Hai cái này hoạt động khác nhau trong thời điểm trước khi AngularJS tải xong, và sự khác biệt đó có thể nhận thấy được đối với người dùng trang web.
| Yếu tố | {{ expression }} | ng-bind |
|---|---|---|
| Viết vào | Nội dung phần tử | Thuộc tính phần tử |
| Trước khi AngularJS được tải | Niềng răng thô hiện lên màn hình | Không có gì được hiển thị |
| Dễ đọc | Cao hơn — giá trị nằm trong phạm vi hợp lý | Thấp hơn — giá trị được ẩn trong một thuộc tính |
| Nhiều giá trị cho mỗi phần tử | Có | Không, chỉ có một mối ràng buộc duy nhất. |
| Liên kết một lần | Vâng, với {{::value}} |
Vâng, với ng-bind="::value" |
Sự xuất hiện thoáng qua của dấu ngoặc nhọn thô được gọi là hiện tượng "nhấp nháy nội dung chưa được nội suy", và điều này xảy ra vì trình duyệt hiển thị mã đánh dấu trước khi AngularJS biên dịch nó. Hãy sử dụng ng-bind hoặc thêm chỉ thị ng-cloak cho nội dung hiển thị ở phần trên màn hình. Dấu ngoặc nhọn vẫn là lựa chọn rõ ràng và dễ đọc hơn ở mọi nơi khác, đặc biệt là khi có nhiều giá trị xuất hiện bên trong một phần tử.
Sự khác biệt giữa biểu thức và $eval
$eval Hàm này đánh giá các biểu thức từ bên trong bộ điều khiển. Các biểu thức được đánh giá trong giao diện người dùng, trong khi đó $eval được đánh giá trong mã điều khiển.
Ví dụ này sử dụng $eval Cộng hai số và đặt kết quả vào đối tượng phạm vi để khung nhìn có thể hiển thị.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.8.3/angular.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>
Code Giải thích:
- Hai biến phạm vi,
avàbMỗi phần tử đều có giá trị là 1. $scope.$evalĐánh giá phép cộng của chúng và gán kết quả cho biến phạm vi.value.- Sau đó, khung nhìn sẽ hiển thị
value.
Đầu ra:
Kết quả hiển thị biểu thức được đánh giá bên trong điều khiển, với tổng của hai biến phạm vi được gửi đến và hiển thị trong khung nhìn.
