Ng-Bind-Html-4

 

In this example, We are going to draw a table using ng-bind-html, Here we have two textboxes where user will enter the no of rows and columns required. Lets say if we enter 5 in rows and 5 in columns then it will draw a table of size 5*5. Let's see the example:

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="app"> <div ng-controller="myController"> <div class="container"> <div class="row well"> <div class="col-md-12"> <div class="row"> <div class="col-md-offset-2 col-md-8 form-horizontal"> <div class="row form-group"> <div class="col-md-2 control-label"> Rows </div> <div class="col-md-3"> <input type="number" ng-model="rows" class="form-control" /> </div> <div class="col-md-2 control-label"> Columns </div> <div class="col-md-3"> <input type="number" ng-model="columns" class="form-control" /> </div> <div class="col-md-2"> <button class="btn btn-primary" ng-click="drawTable()">Draw Table</button> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="table-responsive"><div ng-bind-html="table"></div></div> </div> </div> </div> </div> </div> </div> <script> var app = angular.module("app", ['ngSanitize']); app.controller('myController', ['$scope', '$sce', function ($scope, $sce) { $scope.drawTable = function () { $scope.table = "<table class='table table-striped table-hover'><tbody>"; for (var i = 0; i < $scope.rows; i++) { $scope.table += "<tr>"; for (var j = 0; j < $scope.columns; j++) { $scope.table += "<td>Data</td>"; } $scope.table += "</tr>" } $scope.table += "</tbody></table>"; } }]); </script> <style type="text/css"> .control-label{ text-align:left !important; } </style> </body> </html>
Output