use html in angularjs controller

Name: javascript - use html in angularjs controller - Stack Overflow
Rating: 4.4 (7021 reviews)

Question

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

Firstly - will be better if you will store you data as array and not as separated fields. This will give you a chance to access data from root scope only once and set them to scope. Like: $scope.userData = $rootScope.userData and then you will be able to use ng repeat for this cells and you will no need to use html in controller. — iliya.rudberg, CommentedNov 12, 2018 at 9:33

Dilip Belgumpi · Accepted Answer · 2018-11-12 09:23:08Z

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>

I am getting unxepected token at this line $scope.data= '<table class="table"> — user10445503, CommentedNov 12, 2018 at 9:13

Vlado Pandžić · Accepted Answer · 2018-11-12 09:08:35Z

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>

please include the entire html used
– user10445503
CommentedNov 12, 2018 at 9:19 — user10445503, CommentedNov 12, 2018 at 9:19

Collectives™ on Stack Overflow

use html in angularjs controller

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related