Bài 7 ng-bind-html và ng-bind-teamplate trong AngularJS
Lượt xem: 2994
Xem demo
Cùng xem mẫu để biết cách sử dụng ng-bind-html và ng-bind-template trong AngularJS
Có hai loại ràng buộc dữ liệu trong angularjs.
Hãy làm ví dụ mẫu ở dưới để biết chi tiết về ng-bind-html và ng-bind-teamplate.
<html >
<head >
<title > ng-bind-html và ng-bind-template </title >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js" > </script > <script >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.js" > </script >
<script >
angular.module('MyForm', ['ngSanitize'])
.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" >
<br />
<b>1. Sử dụng ng-bind-html < /b >
<input type="text" name="idHTML" ng-model="myHTML" />
<p ng-bind-html="myHTML" > </p>
<br / >
<br / >
<b>2. Sử dụng ng-bind-template </b>
<br />
Tên: <input type="text" ng-model="name2" > <br/>
Website: <input type="text" ng-model="website" /> <br/>
<pre ng-bind-template="{{name2}} {{website}}!" > </pre>
</form>
</body>
</html>
Xem thêm :
Xem demo