Dynamically add element to DOM in angular

Question

This is how my page looks like on initial load

<body>
 <div class="col-md-12" id="dataPanes">
   <div class="row dataPane"> Chunk of html elements </div>
 </div>

 <div class"col-md-12 text-right">
   <input type="button" class="btn btn-primary" value="Add dynamic row" ng-click="addElementChunk()" />
</body>

I am in need to add rows to div#dataPanes on button click
If I was using jQuery,addElementChunk() function would have looked as below

var addElementChunk = function()
{
   var html = "<div class='row dataPane'> Chunk of html elements </div>";
   $("#dataPanes").append(html);
}

but how do I implement the same in angular??

alfishan aqeel · Accepted Answer · 2017-09-26 12:26:58Z

4

You need to use $compile

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

and $sce

Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render trusted values. Its goal is to assist in writing code in a way that (a) is secure by default, and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.

addElementChunk = function(){ 
    var html = '<div class="row dataPane"> Chunk of html elements </div>';
    var trustedHtml = $sce.trustAsHtml(html);
    var compiledHtml = $compile(trustedHtml)($scope);
    angular.element(document.getElementById('dataPanes')).append(compiledHtml);
}

edited Sep 26, 2017 at 12:26

alfishan aqeel

2202 silver badges5 bronze badges

answered Jun 7, 2017 at 11:58

Satpal

133k13 gold badges168 silver badges171 bronze badges

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

3 Comments

Kgn-web Over a year ago

Thanks!! But I am wondering if I can load a html template inside $compile function since my html is quite big

Kgn-web Over a year ago

roughly 100 lines of html

Satpal Over a year ago

@Kgn-web, Then I would advise you to create a directive and then use $compile

Aya Salama · Accepted Answer · 2017-06-07 13:12:58Z

you can append new div using angular ng-repeat directive

lets say you have an array that contain one element and every time you click the button you add another element to the array, while you are repeating it in your "dataPane" div

so you code could be:

HTML

<div ng-app="myApp" ng-controller="myCtr">
    <div class="col-md-12" id="dataPanes">
        <div class="row dataPane" ng-repeat="element in added_elements"> Chunk of html elements ( {{element}} ) </div>
    </div>

    <div class="col-md-12 text-right">
        <input type="button" class="btn btn-primary" value="Add dynamic row" ng-click="addMoreElements()" />
    </div>
</div>

JS

angular
.module('myApp', [])
.controller('myCtr', ['$scope', function($scope) {
    $scope.added_elements = ["elem 1"];
    $scope.addMoreElements = function(){
        $scope.added_elements.push("elem "+ ($scope.added_elements.length+1));
    } 
}])

so you can add whatever data you want about your repeated row and bind it in html in simple way without having to repeat the whole html code

Working Demo

biswajit-rout · Accepted Answer · 2017-06-07 13:54:11Z

You can also append a new html element in this way. I think its very easy to write and also understand. hope it will help you. angular.element used to access the html element. Here is the html code:

 angular.module('myApp',[]).controller('myCtrl', function($scope){
 
 		$scope.addElementChunk = function()
    {
       var htmlStr = '<div class="row dataPane"> Chunk of html elements </div>';
    	 debugger;
   		 angular.element(document.getElementById('dataPanes')).append(htmlStr);
    }
          
 });

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

 <div class="col-md-12" id="dataPanes">
   <div class="row dataPane"> Chunk of html elements </div>
 </div>

 <div class="col-md-12 text-right">
   <input type="button" class="btn btn-primary" value="Add dynamic row" ng-click="addElementChunk()" />
</div>
</div>

Here is the fiddle link

Collectives™ on Stack Overflow

Dynamically add element to DOM in angular

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related