动态地将元素添加到DOM中

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 我需要在单击按钮时将行添加到div＃dataPanes
If I was using jQuery,addElementChunk() function would have looked as below 如果我使用的是jQuery，则addElementChunk（）函数的外观如下

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?? 但是我该如何实现相同的角度呢？

Answer 1

You need to use $compile 您需要使用$ 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. 将HTML字符串或DOM编译到模板中，并生成模板函数，然后可以使用该函数将范围和模板链接在一起。

and $sce 和$sce

Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render trusted values. 严格上下文转义（SCE）是AngularJS将绑定限制为仅呈现可信值的模式。 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. 其目标是通过以下方式帮助编写代码：（a）默认情况下是安全的，并且（b）使得对安全漏洞（例如XSS，clickjacking等）的审核更加容易。

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);
}

Answer 2

you can append new div using angular ng-repeat directive 您可以使用angular ng-repeat指令附加新的div

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 假设您有一个包含一个元素的数组，并且每次在“ dataPane” div中重复该元素时，每次单击按钮时，都会向该数组中添加另一个元素

so you code could be: 所以你的代码可能是：

HTML 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 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 因此，您可以添加有关重复行的任何数据，并以简单的方式将其绑定到html中，而不必重复整个html代码

Working Demo 工作演示

Answer 3

You can also append a new html element in this way. 您也可以通过这种方式附加新的html元素。 I think its very easy to write and also understand. 我认为它非常容易编写和理解。 hope it will help you. 希望对您有帮助。 angular.element used to access the html element. 用于访问html元素的angular.element。 Here is the html code: 这是html代码：

  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 这是小提琴链接

动态地将元素添加到DOM中

问题描述

3 个解决方案

解决方案1
4 2017-06-07 11:58:50

解决方案2
0 2017-06-07 12:19:12

解决方案3
0 2017-06-07 13:54:11

动态地将元素添加到DOM中

问题描述

3 个解决方案

解决方案1 4 2017-06-07 11:58:50

解决方案2 0 2017-06-07 12:19:12

解决方案3 0 2017-06-07 13:54:11

解决方案1
4 2017-06-07 11:58:50

解决方案2
0 2017-06-07 12:19:12

解决方案3
0 2017-06-07 13:54:11