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