Mục lục

Hướng dẫn sử dụng AngularJS Model

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- ngModel Directive

ngModel là một Directive được xây dựng sẵn của AngularJS, nó định nghĩa ra một thuộc tính mới ng-model, có thể áp dụng cho các HTML Controls (input, textarea, select). Directive này giúp giàng buộc 2 chiều (two-way binding) giữa giá trị của HTML Control và dữ liệu ứng dụng.
OK, Một ví dụ đơn giản. Trong ví dụ này tôi sẽ giàng buộc 2 chiều giữa giữa giá trị của một <input>$scope.fullName, điều này có nghĩa là nếu giá trị của <input> thay đổi nó sẽ được cập nhập vào cho $scope.fullName, và ngược lại nếu giá trị $scope.fullName thay đổi nó sẽ cập nhập cho <input>.
model-example.js
// Create an Application named "myApp".
var app = angular.module("myApp", []);

// Create a Controller named "myCtrl"
app.controller("myCtrl", function($scope) {

    $scope.fullName = "Anonymous";

});
 
model-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>AngularJS Model</title>
      <!-- Check version: https://code.angularjs.org/ -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="model-example.js"></script>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Enter your name:</h3>
         <p><input ng-model = "fullName"/></p>
         <p>Your Name: {{fullName}}</p>
      </div>
   </body>
</html>

Xem thêm các chuyên mục: