AngularJS Expressions Là Gì

AngularJS Expressions Là Gì

AngularJS expresssions là các biểu thức Javascript được viết dựa trên cú pháp của AnguarJS. Tương tự như Javascript expression về bản chất AngularJS là các biểu thức Javascript. Tuy nhiên các biểu thức trong AngularJS sẽ được đặt bên trong thuộc tính của phần tử HTML hoặc ở bên trong nội dung mã HTML bên trong phần tử. Các biểu thức AngularJS được đặt bên trong cặp dấu ngoặc {{}}.

Cú Pháp

Các biểu thức Angular Expressions được viết sử dụng cặp dấu ngoặc {{}}. Ví dụ:

<div ng-app="">
    <p>Ví dụ về AngularJS expressions: {{ 5 + 5 }}</p>
</div>

Đoạn mã trên sẽ cho ra kết quả như sau:

Chúng ta cũng có thể bind (gắn kết) giá trị của biểu thức trong AngularJS với nôi dung HTML trên trang. Hãy xem ví dụ:

<div ng-app="" ng-init="color='blue'">
  <input ng-model="color" type="text" value="{{color}}">
    <p style="color: {{color}}">Thay đổi giá trị của trường nhập dữ liệu ở trên để xem kết quả. Màu hiện tại của dòng chữ này là: {{color}}</p>
</div>

Khi bạn thay đổi giá trị của trường nhập dữ liệu thành red, yellow hoặc orange bạn sẽ thấy màu dòng chữ trong thẻ ở phía dưới thay đổi.

Bind Giá Trị Của Biểu Thức AngularJS

Bạn cũng có thể sử dụng chỉ thị ng-binds directive để bind dữ liệu của biểu thức vào nội dung trang HTML. Ví dụ:

<div ng-app="">
<input type="text" placeholder="Nhập tên bạn..." ng-model="name" value="Tuấn Anh">
<p>Tên bạn là: <span ng-bind="name"></span></p>
</div>

Làm Việc Với Object

Như đã nói ở trên AngularJS expressions về bản chất là Javascript expressions. Vì vậy ngoài việc có thể sử dụng các toán tử trên kiểu số hay kiểu chuỗi, chúng ta còn có thể thực hiện được trên các đối tượng object. Ví dụ:

<div ng-app="" ng-init="me={name:'Angela Sơn Tùng', age: 23, gf_count: 5, feeling: 'Happy'}">
    <h1>Thông Tin Cá Nhân</h1>
    <p>Tên của soái ca là {{ me.name }}</p>
    <p>Soái ca năm nay: {{ me.age }} tuổi</p>
    <p>Soái ca có {{ me.gf_count }} bạn gái</p>
    <p>Soái ca cảm thấy {{ me.feelings }} về {{ me.gf_count }} bạn gái của soái ca</p>
</div>