How to turn an html string from an array into html using angularjs ng-repeat?

Question

I have the following array where each item's value is a string that is html. How can I turn this string into executable html, so that it can be shown?

[
{html:'<button>name</button>'},
{html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'},
{html:'<p>myhtml</p>'}
]

See codepen here: http://codepen.io/chriscruz/pen/YPwVmb

See below for HTML

    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
        <thead>
            <th>Email</th>
        </thead>
        <tbody>
            <tr ng-repeat="(id,item) in data">
                <td>{{item.html}}</td>
            </tr>
        </tbody>
    </table>


</body>

Javascript and Angular JS

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

    app.factory("TestArray", ["$firebase", function($firebase) {
        lst = [
        {html:'<button>name</button>'},
        {html:'<table > <thead> <tr> <th>#</th> <th>UserName</th> <th>Time</th> <th>Comments</th> <th>Reply</th> <!-- <th>like or dislike</th> --> </tr> </thead> <tbody> <tr> <td>1,001</td> <td><a href="#" >Lorem</a></td> <td>2014-10-31</td> <td>ipsum</td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,002</td> <td>amet</td> <td><a><span ></span></a></td> <td><a><span ></span></a></td> <td> <button type="submit" > <span ></span></button></td> </tr> <tr> <td>1,003</td> <td>Integer</td> <td>nec</td> <td>odio</td> <td> <button type="submit"> <span></span></button></td> </tr> <tr> <td>1,003</td> <td>libero</td> <td>Sed</td> <td>cursus</td> <td> <button type="submit" > <span></span></button></td> </tr> </tbody> </table>'},
        {html:'<p>myhtml</p>'}
        ]
        return lst;
    }]);

    app.controller("ctrl", ["$scope","TestArray", function($scope,TestArray) {
        $scope.data = TestArray;
        //$scope.data = Emails;

    }]);

This is the desired result that I'd like to see: http://codepen.io/chriscruz/pen/pvgwzw?editors=101

Kalhan · Accepted Answer · 2014-12-07 16:52:29Z

1

Here is the Updated CodePen

you need to add angular-sanitize.js file

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.js"></script>

and import ngSanitize module in app

var app = angular.module("app", ["firebase",'ngSanitize']);

then you can bind the html using ng-bind-html directive

<td ng-bind-html="item.html"></td>

answered Dec 7, 2014 at 16:52

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Over a year ago

It doesn't seem to work with some html code. Take for example: codepen.io/chriscruz/pen/KwVqKq?editors=101. I'm able to manipulate the string in the array formation process if need be - is there anything I could do to make this work?

Kalhan Over a year ago

please check your html is not a messy one. seems like your html is not well structured.

Chris Over a year ago

Thanks - I had some cleaning up to do. I used python's Beautifulsoup to clean up the html in the array and replaced all quotations with an apostrophe. This seems to do the trick.

Collectives™ on Stack Overflow

How to turn an html string from an array into html using angularjs ng-repeat?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related