如何使用Angularjs将HTML添加到DOM中?

时间:2015-03-11 13:33:49

标签: javascript angularjs

如果它是jquery,我们可以像$('table-row').clone().preprenTo($('table'));

那样做

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

2 个答案:

答案 0 :(得分:1)

我怀疑你需要一个范式转换。阅读"Thinking in AngularJS" if I have a jQuery background

然后,如果您仍然认为通过向DOM添加行可以最好地解决问题,请考虑使用AngularJS directive

答案 1 :(得分:1)

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

那就是说,回答你的问题 - 在角度你没有告诉它如何操纵dom。你告诉它你有什么数据以及你想要它呈现的方式。

我只能猜测你要做什么,但是如果你有一个模板(你的'table-row')和'destination'('table')你会在AngularJS中描述它:

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

这很好,但是你如何添加一行?那么你不要“添加一行” - 你添加一个人,AngularJS会为你添加行。您已经解释了如何显示某个人。

要添加某人,您必须将人员添加到人员列表/数组中,该列表将位于您的视图/应用程序范围内。

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

您需要将人员连接到您的范围,您将在控制器中执行此操作。控制器必须使用ng-controller指令与上面的代码相关联。

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

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