CODEWITHSUNDEEP
javascripthtmlangularjs
user10445503
user10445503

Reputation: 165

use html in angularjs controller

I have html theat I want to use in angularjs controller controller. My problem is to escape the html in the angularjs controller. Here is my snippet

function($scope) {
     $scope.data=  <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>$rootScope.firstname</td>
                <td>$rootScope.lastname</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>$rootScope.firstname1</td>
                <td>$rootScope.lastname1</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>$rootScope.firstname2</td>
                <td>$rootScope.lastname2</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>;

how can I pass the table html and the root scope data into scope.data variable

Upvotes: 1

Views: 64

Answers (2)

Dilip Belgumpi
Dilip Belgumpi

Reputation: 648

Just concatenate $rootScope fields then append it to any html div element

  function($scope) {
     $scope.data= '<table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>'+$rootScope.firstname+'</td>
                <td>'+$rootScope.lastname+'</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>'+$rootScope.firstname1+'</td>
                <td>'+$rootScope.lastname1+'</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>'+$rootScope.firstname2+'</td>
                <td>'+$rootScope.lastname2+'</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>';

EDIT:

var app=angular.module("testProject",[]);

app.controller("TestController", function($scope, $rootScope) {
  
$rootScope.firstname="firstname";
$rootScope.lastname="lastname";
$rootScope.firstname1="firstname1";
$rootScope.lastname1="lastname1";
$rootScope.firstname2="firstname2";
$rootScope.lastname2="lastname2";

     $scope.data= '<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr></thead> <tbody> <tr> <td>1</td><td>'+$rootScope.firstname+'</td><td>'+$rootScope.lastname+'</td><td>@mdo</td></tr><tr> <td>2</td><td>'+$rootScope.firstname1+'</td><td>'+$rootScope.lastname1+'</td><td>@fat</td></tr><tr> <td>3</td><td>'+$rootScope.firstname2+'</td><td>'+$rootScope.lastname2+'</td><td>@twitter</td></tr></tbody> </table>';
     $("#data_table").append($scope.data);
          
          
          });
<html  ng-app="testProject">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<div  ng-controller="TestController" id="data_table"></div>


</html>

Upvotes: 1

Vlado Pandžić
Vlado Pandžić

Reputation: 5048

Save it as string like this:

 $scope.data='<html><div></div></html>'

Then when you want to render it use ng-bind-html like this:

 <div>
   <p ng-bind-html="data"></p>
 </div>

Upvotes: 0

Related Questions