Bài 6 ng-bind trong AngularJS

Lượt xem: 3813

Xem demo

Làm thế nào để sử dụng ng-bin?

Chỉ dẫn ng-bind trong AngularJS tạo dữ liệu ràng buộc cho một phần tử.

Chạy đoạn code sau để biết nó ràng buộc thế nào

 <html>  
 <head>  
   <title>ng-bind </title>  
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js" >   </script >    
   <script>    
     angular.module('MyForm', [])  
         .controller('ExampleController', ['$scope', function ($scope) {          
         }]);    
   </script>    
   <style>    
     .my-input {  
       -webkit-transition: all linear 0.5s;  
       transition: all linear 0.5s;  
       background: transparent;  
     }  
   
       .my-input.ng-invalid {  
         color: white;  
         background: red;  
       }  
   </style >    
 </head >    
 <body ng-app="MyForm">    
   <form name="calForm" ng-controller="ExampleController" >    
     <b>  1. Sử dụng ng-bind </b>    
     <h5> Vui lòng nhập dữ liệu </h5>    
     <input type="text" name="userName" ng-model="name" />  <br/>    
     <h5> Đầu ra là : </h5>    
     <span ng-bind="name" >   </span>   
      
     <br />    
     <br />    
     <b>  2. Không sử dụng ng-bind - Lấy qua model </b>    
     <h5>  Nhập dữ liệu khác vào </h5 >    
     <input type="text" name="userName1" ng-model="name1" />  <br/>    
     <h5>  Kết quả là :</h5>    
     <span>  {{name1}}</span >       
   </form>    
 </body>    
 </html>    

Xem thêm:Bài 7 ng-bind-html và ng-bind-teamplate trong AngularJS

Xem demo