AngularJS-将元素追加到指定的DOM元素

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, fe:

[
{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 .

Answer 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>

Answer 2

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.