Let's say I am using angular for data-bindings and prevent me from using repetitive code:
<div id="{{slide.id}}" class="step" data-x="{{slide.x}}" data-y="{{slide.y}}" data-z="{{slide.z}}" data-rotate-x="{{slide.rotateX}}" data-rotate-y="{{slide.rotateY}}" data-rotate-z="{{slide.rotateY}}" data-scale="{{slide.scale}}" ng-repeat="slide in slides">
{{slide.content}}
</div>
As you can see, I prepared that div
so that it iterates through each object in this this JSON file:
[
{
"id":"overview",
"x":3000,
"y":1500,
"z":0,
"rotateX":0,
"rotateY":0,
"rotateZ":0,
"scale":10,
"content":"content2"
},
{
"id":"slide_1",
"x":1600,
"y":1800,
"z":-10,
"rotateX":0,
"rotateY":0,
"rotateZ":0,
"scale":1,
"content":"content1"
},
]
The file perfectly loads using this:
App = angular.module('App', []);
App.controller('SlideCtrl', ($scope, $http) ->
$http.get('js/slides.json')
.then((res)->
$scope.slides = res.data
)
)
But somehow the output looks like this:
Is there anyone who actually implemented angular and impress together?
I'm also working on this.. but little differently.. and my code works 100%. Here is my HTML Template
<div ng-controller="agendaController">
<ul><li ng-repeat="agendaItem in agendaItems" id="agenda-{{agendaItem.id}}" class="step" data-x="{{agendaItem.x}}" data-y="{{agendaItem.y}}" data-scale="{{agendaItem.scale}}">
<q>{{agendaItem.content}}</q></li></ul>
</div>
and here is my javascript
var app = angular.module('app', []);
app.controller('agendaController', function($scope){
$scope.agendaItems = [];
contents = [
"Various Stages in Construction of a building",
"Stake-holders & their levels of hierarchy from TCS to Labour",
"Survey Reports"
];
for (i = 0, n = contents.length, x = -12000, y = -10000, scale = 2; i < n; i++) {
data = {'id': (i + 1), 'x': x, 'y': y, 'scale': scale, 'content': contents[i]}
$scope.agendaItems.push(data);
y += 1000;
}
});