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