單擊按鈕動態添加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元素

回答

相關問題