javascript - 如何使用 Angularjs 将 html 添加到 DOM 中？

Question

如果是jquery，我们可以这样做 $('table-row').clone().preprenTo($('table'));

我知道它只是在添加新数据时将新值推送到对象中，但我想先插入空行和字段，如何使用 angularjs 添加该 html？

Answer 1

John 添加了一个有关 AngularJS 的著名问题/答案的链接。我建议你读一下。

也就是说，要回答你的问题 - 在 Angular 中，你不会告诉它如何操作 dom。您告诉它您拥有哪些数据以及您希望如何呈现数据。

我只能猜测你想要做什么，但是如果你有一个模板(你的“表行”)和一个“目的地”(“表”)，你会在 AngularJS 中描述它，如下所示:

<table ng-controller="PersonsController">
  <tr ng-repeat="person in persons">
    <td>{{person.Name}}</td>
    <td>{{person.Address}}</td>
  </tr>
</table>

这很好，但是如何添加一行呢？好吧，你不需要“添加一行”——你添加一个人，AngularJS 会为你添加行。您已经解释过您希望如何显示一个人。

要添加一个人，您必须将一个人添加到人员列表/数组中，并且该列表将在您的 View /应用程序的范围内。

persons.push({Name: 'Bill', Address: 'Somewhere'});

您需要将人员附加到您的范围，这将在 Controller 中执行。 Controller 必须通过 ng-controller 指令与上述代码关联。

app.controller('PersonsController', function ($scope) {
  $scope.persons = [];
});

在上面的代码中，我假设您有一个指向您的 Angular 应用程序的变量app。从 jquery 到 Angular，您必须克服一个小的学习曲线。在我看来，大多数情况下，是将你的思维方式从命令式编码风格转变为声明式编码风格。