Cấp bậc tác giả:

TRAINING

[Angular][Phần 2]Angular Directives - Chỉ thị

Được viết bởi webmaster ngày 15/04/2016 lúc 10:56 PM
Như bạn đã thấy, chỉ thị AngularJS là thuộc tính HTML bắt đầu bằng ng.
  • 0
  • 1294

[Angular][Phần 2]Angular Directives - Chỉ thị

Loading...

Chỉ thị khởi tạo

Như bạn đã thấy, chỉ thị AngularJS là thuộc tính HTML bắt đầu bằng ng.

Chỉ thị ng-init dùng để khởi tạo các biến của ứng dụng AngularJS.

<div ng-app="" ng-init="ten='Quang Lê'">
        <p>
            Tên của tôi là <span ng-bind="ten"></span>
        </p>
</div>

Chỉ thị ng-init khai báo biến ten và liên kết giá trị tới thẻ <span> bằng ng-bind.

Kết quả:

Tên của tôi là Quang Lê

Biểu thức AngularJS

Biểu thức Angular được viết bên trong 2 dấu ngoặc nhọn: {{ expression }}. Nó liên kết dữ liệu đến HTML như chỉ thị ng-bind.

<div ng-app="" ng-init="ten='Quang Lê'">
        <p>
            Biểu thức: {{ 5 + 5 }}</p>
        <p>
            Tên: {{ten}}</p>
    </div>

Kết quả

Biểu thức: 10
Tên: Quang Lê

Chị thị ng-model
Chỉ thị ng-model dùng để liên kết với các giá trị của các điều khiển HTML (input, seclect, textarea).

Cung cấp các hành vi xác nhận như không được rỗng, kiểm tra email, số điện thoại, ...

Cách sử dụng:

<asp:TextBox runat="server" ID="txtChiThi" ng-model="myModel"></asp:TextBox>

Như phần giới thiệu đã trình bày cách mà ng-model liên kết dữ liệu với ng-bind.

Phần Biểu mẫu sẽ trình bày cách xác thực dữ liệu của chỉ thị này.

 <div ng-app="" ng-init="names=[
{name:'Putin',country:'Nga'},
{name:'Obama',country:'Mỹ'},
{name:'Tập Cận Bình',country:'Trung Quốc'}]">
        <ul>
            <li ng-repeat="x  in names">{{ x.name + ', ' + x.country }} </li>
        </ul>
    </div>


Chỉ thị ng-click
Chỉ thị này định nghĩa sự kiện click trên web.

Thử ví dụ sau:

<div ng-app="myApp" ng-controller="personCtrl">
        <button ng-click="click()">
            Click</button>
        <p ng-show="show">
            First Name:
            <input type="text" ng-model="firstName"><br>
            Last Name:
            <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}
        </p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function ($scope) {
            $scope.firstName = "DOTNET",
        $scope.lastName = "GROUP",
            $scope.show = true;
            $scope.click = function () {
                $scope.show = !$scope.show;
            }
        });
    </script>


Giải thích ví dụ
Hàm click trong controller sẽ làm thay đối giá trị của biến show khi click vào Button, sự kiện click trong angular tương tự sự kiện click trên HTML.

Biến show được đặt trong chỉ thị ng-show trong thẻ p, Thẻ này sẽ hiện nếu giá trị biến là true và ngược lại sẽ ẩn (Tương tự ta có chỉ thị ng-hide).

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML