Tìm hiểu về angularjs( p 4)- ngModel

  • Như bài trước mình đã giới thiệu với các bạn về directive trong angularjs. Bài hôm nay chúng ta sẽ đi tìm hiểu về danh sách các directive: bài này ta sẽ tìm hiểu vể ng-model.

** 1. ng-model(ngModel) là gì**

  • ngModel là một Directive dùng để liên kết dữ liệu với client, nghĩa là nó thường được dùng để cho người dùng nhập liệu nên ta hay sử dụng trong form html.

  • Tìm hiểu chi tiết về ng-model mọi người vào link sau: https://docs.angularjs.org/api/ng/directive/ngModel

** 2. Nhiệm vụ ng-model(ngModel) trong angularjs **

  • Liên kết View trong model và một số directives khác như input, textarea hoặc select.

  • Cung cấp các thao thác validate dữ liệu như kiểm tra kiểu dữ liệu có phải là số, là email, ...

  • Kiểm soát thông tin từ client nhập vào có hợp lệ hay không và xuất thông báo lỗi

  • Thiết lập các css class trong thẻ HTML (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) và các hiệu ứng thông báo

Chú ý: ng-model sẽ cố gắng liên kết với các giá trị được khai báo nếu không tồn tại thì nó sẽ được tạo ngầm và lưu vào Scope.

Screen Shot 2015-12-25 at 3.29.22 PM.png

** 3. Các css trong ng-model **

  • ng-valid: model is valid

  • ng-invalid: model is invalid

  • ng-valid-[key]: for each valid key added by $setValidity

  • ng-invalid-[key]: for each invalid key added by $setValidity

  • ng-pristine: the control hasn't been interacted with yet

  • ng-dirty: the control has been interacted with

  • ng-touched: the control has been blurred

  • ng-untouched: the control hasn't been blurred

  • ng-pending: any $asyncValidators are unfulfilled

  • Hiệu ứng được kích hoạt khi các class trong css được thêm hoặc xóa bỏ trên input element theo mỗi model như : .ng-pristine, .ng-dirty, .ng-invalid, .ng-valid ... Các hiệu ứng được kích hoạt trong ngModel như ngClass, hiệu ứng có thể được nối vào sử dụng quá trình chuyển đổi CSS, các hiệu ứng JS. ví dụ

    .my-input {
      transition:0.5s linear all;
      background: white;
    }
    .my-input.ng-invalid {
      background: red;
      color:white;
    }

** 4. Các ví dụ trong ng-model **

** xét ví dụ 1: **

    <body ng-app="myapp">
        <input type="text" ng-model="name">
        <div> hello {{name}} </div>
    </body>
  • xem demo tại đây http://jsfiddle.net/nukRe/369/

  • kết quả hiện ra Screen Shot 2015-12-25 at 10.59.00 AM.png

  • Khi ta gõ vào ô input thì hello bên dưới sẽ thay đổi theo như hình này Screen Shot 2015-12-25 at 11.00.54 AM.png

** xet ví dụ 2:**

    <script>
     angular.module('myapp', [])
       .controller('ExampleController', ['$scope', function($scope) {
         $scope.val = '1';
       }]);
    </script>
    <style>
      .my-input {
        transition:all linear 0.5s;
        background: transparent;
      }
      .my-input.ng-invalid {
        color:white;
        background: red;
      }
    </style>
   <div ng-app="myapp">
    <p>
     Update input to see transitions when valid/invalid.
     Integer is a valid value.
    </p>
    <form name="testForm" ng-controller="ExampleController">
      <input ng-model="val" ng-pattern="/^\d+$/" class="my-input"
             aria-describedby="inputDescription" />
    </form>
    </div>

Screen Shot 2015-12-25 at 11.04.59 AM.png

kết quả ta nhận được khi ta click vào input và gõ kí tự là text thì 1 background màu đỏ sẽ hiện ra và gõ số thì nó ko hiện background. vì ta sửa dụng css

        .my-input.ng-invalid {
            color:white;
            background: red;
        }

ng-invalid là khi input nhập vào trong ng-model không hợp lệ với ng-model="val" ng-pattern="/^\d+$/". Như hình ảnh này

Screen Shot 2015-12-25 at 11.07.46 AM.png

** xet ví dụ 3:**

    <div ng-app="demo">
        <div ng-controller="democtr">
            <p> add js value together: {{a}} +{{b}} ={{a + b}}</p>
            <input type="number" ng-model="a">
            <input type="number" ng-model="b">
        </div>
        <div ng-controller="democtr">
            <p> add js value together: {{a}} +{{b}} ={{a + b}}</p>
            <input type="text" ng-model="a">
            <input type="text" ng-model="b">
        </div>
    </div>
    <script>
     angular.module('demo', [])
       .controller('democtr', function($scope) {
         $scope.a = 1;
         $scope.b = 2;
       });
    </script>

kết quả hiện ra:

Screen Shot 2015-12-25 at 3.11.06 PM.png

  • khi ta thay đổi giá trị thì

<input type="number"> sẽ hiện kết quả cộng của số. Còn <input type="text"> sẽ hiện kết quả là ghép 2 chuỗi với nhau như hình

Screen Shot 2015-12-25 at 3.14.36 PM.png