hocvietcode.com
  • Trang chủ
  • Học lập trình
    • Lập trình C/C++
    • Lập trình HTML
    • Lập trình Javascript
      • Javascript cơ bản
      • ReactJS framework
      • AngularJS framework
      • Typescript cơ bản
      • Angular
    • Lập trình Mobile
      • Lập Trình Dart Cơ Bản
        • Dart Flutter Framework
    • Cơ sở dữ liệu
      • MySQL – MariaDB
      • Micrsoft SQL Server
      • Extensible Markup Language (XML)
      • JSON
    • Lập trình PHP
      • Lập trình PHP cơ bản
      • Laravel Framework
    • Lập trình Java
      • Java Cơ bản
    • Cấu trúc dữ liệu và giải thuật
    • Lập Trình C# Cơ Bản
    • Machine Learning
  • WORDPRESS
    • WordPress cơ bản
    • WordPress nâng cao
    • Chia sẻ WordPress
  • Kiến thức hệ thống
    • Microsoft Azure
    • Docker
    • Linux
  • Chia sẻ IT
    • Tin học văn phòng
      • Microsoft Word
      • Microsoft Excel
    • Marketing
      • Google Adwords
      • Facebook Ads
      • Kiến thức khác
    • Chia sẻ phần mềm
    • Review công nghệ
    • Công cụ – tiện ích
      • Kiểm tra bàn phím online
      • Kiểm tra webcam online
Đăng nhập
  • Đăng nhập / Đăng ký

Please enter key search to display results.

Home
  • AngularJS
  • Lập trình Javascript
Expressions (biểu thức) trong AngularJS

Expressions (biểu thức) trong AngularJS

  • 20-04-2022
  • Toanngo92
  • 0 Comments

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:

TypeScript với Kiểu Dữ Liệu Cơ Bản – 3
TypeScript với Kiểu Dữ Liệu Cơ Bản – 2
TypeScript với Kiểu Dữ Liệu Cơ Bản – 1
Typescript cơ bản và cách cài đặt cho người mới
Thực Hành Micro Frontends
Dynamic Component trong Angular
Async Validator trong Angular Form
Reactive Forms Trong Angular (Phần 2)
Reactive Forms Trong Angular (Phần 1)
Template-driven Forms Trong Angular (Phần 2)
Template-driven Forms Trong Angular (Phần 1)
Guards and Resolvers (Phần 3)

THÊM BÌNH LUẬN Cancel reply

Dịch vụ thiết kế Wesbite

NỘI DUNG MỚI CẬP NHẬT

KHÁI NIỆM QUẢN LÝ DỰ ÁN CÔNG NGHỆ THÔNG TIN (IT PROJECT MANAGEMENT)

Cấu trúc lập trình và Mảng

Bắt đầu với C#

1. GIỚI THIỆU KHÁI NIỆM CHUẨN MỰC – ĐẠO ĐỨC VÀ VẤN ĐỀ NGHỀ NGHIỆP TRONG CNTT

2. ÁP DỤNG CÁC CHUẨN MỰC VÀ VẤN ĐỀ NGHỀ NGHIỆP TRONG CNTT

Giới thiệu

hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với HỌC VIẾT CODE

© hocvietcode.com - Tech888 Co .Ltd since 2019

Đăng nhập

Trở thành một phần của cộng đồng của chúng tôi!
Registration complete. Please check your email.
Đăng nhập bằng google
Đăng kýBạn quên mật khẩu?

Create an account

Welcome! Register for an account
The user name or email address is not correct.
Registration confirmation will be emailed to you.
Log in Lost your password?

Reset password

Recover your password
Password reset email has been sent.
The email could not be sent. Possible reason: your host may have disabled the mail function.
A password will be e-mailed to you.
Log in Register
×