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.

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>