CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Chatz
Chatz

Reputation: 348

AngularJS dynamic row generation with HTML formatting

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>

This is what my HTML output looks like I want to get the HTML tags in column 3 to be applied to the text.

Upvotes: 0

Views: 146

Answers (3)

rittam
rittam

Reputation: 318

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/

Upvotes: 1

Varun Arora
Varun Arora

Reputation: 26

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 :)

Upvotes: 1

Nafiul Islam
Nafiul Islam

Reputation: 1220

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

Upvotes: 0

Related Questions