使用 Angular.js 将新的子元素添加到 HTML DOM答案

【问题标题】：Adding new child's to HTML DOM with Angular.js使用 Angular.js 将新的子元素添加到 HTML DOM
【发布时间】：2015-09-23 12:12:08
【问题描述】：

我有这样的 HTML 块：

<div id="parent">
    <div id="child_1"></div>
    <div id="child_2"></div>
    <div id="child_3"></div>
    <div id="child_4"></div>
</div>

我希望能够用 Angular.js 做到这一点：

1- 找到一个具有 id 的孩子并添加新的孩子 before 或 after 那

2- 通过查找 id 删除子元素（也释放它的内存）

【问题讨论】：

到目前为止你有没有尝试过？
@javierfdezg：我没有，因为我在网上找到的所有东西都无法为我解决这个问题

标签： javascript jquery html angularjs node.js

【解决方案1】：

你可以在javascript的帮助下做到这一点

1- 找到一个具有 id 的孩子并在其之前或之后添加新的孩子

var elem=document.createElement('div');
elem.setAttribute("id", "uniqueIdentifier");

2- 通过查找 id 删除子元素（也释放它的内存）

var child=document.getElementById('uniqueIdentifier');
child.parentNode.removeChild(child);

希望对你有帮助

【讨论】：

【解决方案2】：

如果你想用 Angular 来做，你必须使用directives。

这是来自Angular doc的sn-p代码：

var app = angular.module("MyApp", []);

app.directive("repeatNtimes", function() {
  return {
    restrict: "E",
    compile: function(tElement, attrs) {
      var content = tElement.children();
      for (var i=1; i<attrs.repeat; i++) {
        tElement.append(content.clone());
      }
    }
  };
});

【讨论】：

【解决方案3】：

查看 AngularJS 文档。特别是在 ng-repeat 上，如果它可以帮助你的话。更多，尝试将 JS 函数归因于您的 div 父级。但是，如果您尝试一下，Google 可以帮助您。

【讨论】：

尝试在angular way而不是jQuery中做事。
ng-repeat 是 Angular 方式 ^^。当我说“JS 函数”时，我的意思是“来自您的 JS 文件的函数”。所以它可以用Angular的方式制作。

【解决方案4】：

我认为这样做的唯一方法是通过 JQuery 或纯 Javascript，如果它们不是由 Angular 本身实例化的，Angular 就无法真正选择您的 HTML DOM 元素。我会选择简单的 Jquery ...

在 : 之后添加子元素：

$(#id).after('<div> New Child </div>')

或之前：

$(#id).before('<div> New Child before </div>')

删除：

$('#id').remove()

希望这会有所帮助！

【讨论】：