How to add html into DOM with Angularjs?

Question

if it's jquery, we can do like $('table-row').clone().preprenTo($('table'));

I know it's just push a new value into an object in adding new data but I want to first insert the empty row and field first, how to add that html with angularjs?

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

I suspect you need a paradigm shift. Read "Thinking in AngularJS" if I have a jQuery background.

Then, if you still think that your problem is best solved by adding a row to the DOM, consider using an AngularJS directive.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 11 '15 at 13:37

John Bledsoe

17,142
5
42
59

is there any simpler way? jquery did that with one line of code, how many lines I need for angularjs? – James Lemon Mar 11 '15 at 13:44
If all you want to do is manipulate the DOM then you shouldn't use AngularJS. jQuery is fine for that purpose. If you want to build single-page applications and reusable client-side web components, then AngularJS is awesome. It's really a question of what kind of application you want to build. – John Bledsoe Mar 11 '15 at 13:46
I wrote in angular before but I forgot how to do it. Can u take a look?http://jsfiddle.net/u9gce3f2/ How to add an empty field? – James Lemon Mar 11 '15 at 13:53
Sure, if you can post to Plunker or something. – John Bledsoe Mar 11 '15 at 13:55
I'm surprised you chose Angular 1.0.3. If that's a hard requirement then I still recommend using ngRepeat, but you may encounter other issues. If you can use a later version of AngularJS then this will do it. http://jsfiddle.net/fxm3eg2j/ – John Bledsoe Mar 11 '15 at 14:04

score 1 · Accepted Answer · answered Mar 11 '15 at 15:25

John added a link to a famous question/answer regarding AngularJS. I would advice you to read that.

That said, to answer your question - in angular you do not tell it how to manipulate the dom. You tell it what data you have and how you want it presented.

I can only guess to what you are trying to do, but if you have a template (your 'table-row') and a 'destination' ('table') you would describe it in AngularJS like this:

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

That is great, but how do you add a row? Well you don't "add a row" - you add a person and AngularJS will do the adding of rows for you. You already explained how you want a person displayed.

To add a person you would have to add a person to a list/array of persons and that list would be in the scope of your view/application.

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

You will need to attach the persons to your scope, which you will do in a controller. A controller would have to be associated with the code above with the ng-controller directive.

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

In the above code i assume you have a variable app pointing to your angular application. There is a small learning curve you will have to overcome, going from jquery to angular. Mostly, the way i see it, is moving your mindset from a imperative coding style to a declarative coding style.

How to add html into DOM with Angularjs?

2 Answers2