AngularJS dynamic row generation with HTML formatting

Question

I am using ng-repeat to generate table rows on HTML. I have HTML tags inside my row content that I want to format the content with.But it will only print the text with html tags as plain text without identifying them as HTML tags.

<tr ng-repeat=" styleRowDetail in styleRowDetails">
  <td>{{styleRowDetail.shortMessage}}
  </td>
  <td>{{styleRowDetail.classOriginated}}
  </td>
  <td>{{styleRowDetail.method}}
  </td>
  <td>{{styleRowDetail.lineRange}}
  </td>
  <td>{{styleRowDetail.details}}
  </td>
</tr>

Varun Arora · Accepted Answer · 2016-06-12 11:03:14Z

here's a working code.

var jsondata = [{
  "shortMessage": "data 1",
  "classOriginated": "data 2",
  "method": "<i>data 3</i>",
  "lineRange": "data 4",
  "details": "<b>data 5</b>"
}];

var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
  $scope.styleRowDetails = jsondata;
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat=" styleRowDetail in styleRowDetails">
      <td ng-bind-html="styleRowDetail.shortMessage">
      </td>
      <td ng-bind-html="styleRowDetail.classOriginated">
      </td>
      <td ng-bind-html="styleRowDetail.method">
      </td>
      <td ng-bind-html="styleRowDetail.lineRange">
      </td>
      <td ng-bind-html="styleRowDetail.details">
      </td>
    </tr>
  </table>

</div>

Hope it helps :)

rittam · Accepted Answer · 2016-06-12 11:21:24Z

1

Simple Example to generate multiple row using ng-repeat Directive in AngularJS.

HTML

<div ng-app="myApp" ng-controller="appCtrl">
  <table>
    <tr ng-repeat="i in styleRowDetails">
      <td>{{i.val}}</td>
    </tr>
  </table>
</div>

JS

var myApp = angular.module('myApp', [])

myApp.controller('appCtrl', ['$scope', function($scope) {
  $scope.styleRowDetails = [{
    val: 'welcome'
  }, {
    val: 'hello'
  },{
  val: 'world'
  }
  ];

}]);

Working Fiddle: https://jsfiddle.net/rittamdebnath/3oy5fok3/

answered Jun 12, 2016 at 11:21

rittam

3181 gold badge3 silver badges14 bronze badges

Comments

Nafiul Islam · Accepted Answer · 2016-06-12 09:50:03Z

0

You should try ng-bind-html

<td ng-bind-html="styleRowDetail.details"></td>

For a better understanding visit the documentation of ng-bind-html by angularjs

answered Jun 12, 2016 at 9:50

Nafiul Islam

1,2208 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS dynamic row generation with HTML formatting

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related