Tutorial 7 - ng-bind-html and ng-bind-template in AngularJS

Sample to know how to use ng-bind-html and ng-bind-template in AngularJS

Have two other binding type to bind data in angularjs. Please do following sample for detail

ng-bind-html and ng-bind-template example



   
 <html>  
 <head>  
   <title>ng_bin_singlepage</title>  
   <script  src="//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">  
     <br />  
     <b>1. Using ng-bind-html </b>  
     <input type="text" name="idHTML" ng-model="myHTML" />  
     <p ng-bind-html="myHTML"></p>  
   
     <br />  
     <br />  
     <b>2. Using ng-bind-template </b>  
     <br />  
     Name: <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>  
   


1 comment:

  1. thank you for good tutorials.
    You must include angular sanitize for using ng-bind-html directive

    ReplyDelete

Popular Posts