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).