openplanning

Hướng dẫn và ví dụ AngularJS Model

  1. ngModel Directive

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>