AngularJS - Append element to specified DOM element

Question

I'm new to AngularJS and i'm trying to imagine myself, how to do this scenario with angular:

Let's say we have 20 difftent divs:

<div id="div0"></div>
<div id="div1"></div>
...
<div id="div19"></div>

Now, in some controller we are loading JSON, f.e.:

[
{label: "Lorem ipsum", position: "div0"},
{label: "Dolor", position: "div2"},
{label: "Lorem ipsum", position: "div8"}
]

Now, I want to render this elements, so the output will be, for the first JSON object:

{label: "Lorem ipsum", position: "div0"} -> <p>{{label}}</p> -> <p>Lorem</p>

and append this to #div0.

Ben Lesh · Accepted Answer · 2012-11-09 14:51:51Z

1

If I understand your question I think this is the answer:

app.controller('MyCtrl', function($scope) {
   $scope.items = [
      {label: "Lorem ipsum", position: "div0"},
      {label: "Dolor", position: "div2"},
      {label: "Lorem ipsum", position: "div8"}
   ];
});

and here's the markup:

<div ng-repeat="item in items" id="{{item.position}}"><p>{{item.label}}</p></div>

That's pretty much all there would be to it.

EDIT

The OP would like to place the data into hard-coded HTML... so do to that you could do something like this:

app.controller('MyCtrl', function($scope) {
   $scope.items = [
      {label: "Lorem ipsum", position: "div0"},
      {label: "Dolor", position: "div2"},
      {label: "Lorem ipsum", position: "div8"}
   ];

   $scope.getValue = function(position) {
      for(var i = 0; i < $scope.items.length; i++) {
        var item = $scope.items[i];
        if(item.position == position) {
            return item.label;
        }
      }
      return '';
   };
});

Markup like so:

<div id="div0">{{getValue('div0')}}</div>
<div id="div1">{{getValue('div1')}}</div>
<div id="div8">{{getValue('div8')}}</div>

edited Nov 9, 2012 at 14:51

answered Nov 9, 2012 at 13:38

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Prokopowicz Over a year ago

Thaks for answer, but I have some diffrent situation in mind: Let's assume, that in our layout template we have hardcoded: <div id="div1"></div> <div id="div2"></div> From JSON in our controller we get info, that we should place "Lorem" in out EXSISTING div#div1 and "Ipsum" in exsiting div#div2 ` [ {label: "Lorem", position: "div1"}, {label: "Ipsum", position: "div2"} ]` So before angular runs our DOM would be like: <div id="div1"></div> <div id="div2"></div> And after it should be like: <div id="div1">Lorem</div> <div id="div2">Ipsum</div>

Michael Prokopowicz Over a year ago

That looks ok :) And a bonus question: It is possible to do this with jquery generated content? ( I have a jquery generated "grid" ). Look at this: homersoft-www.dyndns.org/wh-mobileweb These divs are genereted with JQuery.

Ben Lesh Over a year ago

There's no reason it shouldn't be. I'm not familiar with the grid plugin you're using, however. The only gotcha you might find is if you try to use JQuery to write out the markup, the markup may not be $compiled as a template. Good luck.

Mark Rajcok · Accepted Answer · 2012-11-09 22:28:13Z

0

If you have control over the JSON that is returned from the server, the following would simplify things:

Controller/JSON:

$scope.contents = {
    content0: "Lorem",
    content1: "lpsum"
};

Markup:

<div>{{contents.content0}}</div>
<div>{{contents.content1}}</div>

In jQuery, we normally think of associating content/DOM changes with IDs.
In Angular, we try to declare where the content should go, without the use of IDs.

answered Nov 9, 2012 at 22:28

Mark Rajcok

365k114 gold badges500 silver badges494 bronze badges

Collectives™ on Stack Overflow

AngularJS - Append element to specified DOM element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related