admin管理员组

文章数量:1332377

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??

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??

  • javascript
  • jquery
  • html
  • css
  • angularjs
Share Improve this question asked Jun 7, 2017 at 11:56 Kgn-webKgn-web 7,56531 gold badges105 silver badges175 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

You need to use $pile

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 piledHtml = $pile(trustedHtml)($scope);
    angular.element(document.getElementById('dataPanes')).append(piledHtml);
}

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

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./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

本文标签： javascriptDynamically add element to DOM in angularStack Overflow

版权声明：本文标题：javascript - Dynamically add element to DOM in angular - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742305611a2449854.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。