单击按钮动态添加DOM元素

我想在单击按钮时将DOM元素添加到页面，我已经将代码添加到名为“newmission.html”的新html文件中，如下所示。单击按钮动态添加DOM元素

<div class="boxheader" ng-controller="edit_vision_missionCtrl"> 
    <div style="float:right; clear:right; width:20%;"> 
     <span><a href="" style="" ng-click="deletemission(mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span> 
    </div> 
    <span style="font-size: large; font-family: monospace; font-weight: bold;">EDIT MISSION NAME</span><input type="text" value="Enter Mission Name" class="form-control" style="background-color: #e8e8e8"> 
</div> 
<div style="padding-top: 10px;"> 
    <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">EDIT MISSION POINTS</span><br /> 
</div> 
<div style="padding-top: 10px;"> 
    <ul style="float: left; width: 100%;"> 
     <li style="padding: 2px; width: 100%;"> 
      <div style="float:right; clear:right; width:20%;"> 
       <span><a href="" style=""><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span> 
      </div> 
      <div> 
       <input type="text" value="Enter Mission Point" class="form-control" style="background-color: #e8e8e8; width: 80%;"> 
      </div> 
     </li> 
    </ul> 
</div> 
<div style="padding-top: 35px;"> 
    <a href=""><img id="addmissionpoint" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a> 
</div>

我打电话的功能“addmission”这是在控制器，增加了上面的html文件内容具有ID格“toappend”，但它无法正常工作。我使用JQuery来添加这个，但是angularJS或Javascript解决方案也会有所帮助。控制器中的功能如下所示。

var newid = 0; 
$scope.addmission = function(){ 
    newid--; 
    $.get("newmission.html", function(data) { 
     $("#toappend").prepend(data); 
    }); 
};

这是我从哪里调用函数的代码。

<div style="padding-top: 35px;"> 
     <a href="" ng-click="addmission()"><img id="addmission" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a> 
    </div>

来源

2015-06-21 Vikram Singh Jadon

负责处理**点击**的代码在哪里？你应该在html中的某个地方有一个'ng-click =“addmission（）”'。也许在这里：'

我已经添加了我从哪里调用函数的代码 –

这不是非常棱角分明。通常你必须保持你的观点和数据完全分离。查看https://github.com/angular-ui/ui-router。如果你需要同一类型的多个视图。通常您将数据存储在服务中并加载1个通用视图。并通过控制器动态添加数据。 – kishanio

它是简单的使用NG-显示/ NG隐藏

如果你有一个按钮：

<button class="primary" ng-click="addmission()" >Addmission</button> 

<div class="boxheader" ng-controller="edit_vision_missionCtrl" ng-show="whenAdmission" ng-cloak> 
//all other code 
</div>

当事件被触发，简单的更新的时候入场标志设置为true作为：

$scope.addmission = function(){ 
    $scope.whenAdmission = true; 
};

这将呈现隐形的html，否则它将保持隐藏状态。将标志初始化为$ scope.whenAdmission = false;在页面加载。

来源

2015-06-21 11:58:47 Sajal

阅读更多关于它在这里：https://docs.angularjs.org/api/ng/directive/ngShow – Sajal

我必须动态地添加它们，可能不止一次.. ..所以我认为ng-show不起作用 –

有几种插入新DOM节点的方法。

在您的用例中，由于您有一串HTML文本，并且想要告诉浏览器将其解析为HTML元素，因此您需要使用innerHTML。

var myElement = document.getElementById('myElement') 
var someHTML = '<div style="color: blue;">I am <b>blue</b>!</div>" 

myElement.innerHTML = someHTML;

这将告诉浏览器解析HTML字符串划分为元素，并把它们插入到myElements的子树。

由于您使用的是jQuery，因此您可以使用jQuery的$(...).html()，无论如何，这可能会调用innerHTML。

现在，由于您使用的是Angular，因此您可能希望将HTML作为模板加载并将其呈现为部分模式，而不是直接操作DOM（让Angular执行此操作）。这里有一篇关于动态加载模板的好文章：http://onehungrymind.com/angularjs-dynamic-templates/

来源

2015-06-21 12:01:35

你不应该直接操纵你的控制器中的DOM。这是一个可怕的，可怕的想法，应该永远不要做。我会做的是写一个简单的指令，或者如果你真的懒惰，使用ng-include。但是对于上帝的爱，不要直接从控制器中插入东西到DOM中。如果您编写指令，您可以在所有项目中一遍又一遍地重复使用相同的元素，并相信我，可以节省大量时间。

了解如何编写指令。他们在第一次脸红时有些复杂，但它们是Angular的强大功能。

来源

2015-06-21 14:06:28 natnai

单击按钮动态添加DOM元素

回答

相关问题