I've been experimenting with some exercises to grasp the inner workings of AngularJS, but I'm feeling a little lost at the moment.
Despite scouring through the API, various documentation, and tutorials, I haven't quite found what I'm looking for.
To illustrate my point, I've put together a small JsFiddle: http://jsfiddle.net/8HqnZ/
What I'm attempting is fairly basic... although I suspect I may not be doing things the best way possible. Nonetheless, I'm eager to learn and any advice would be greatly appreciated.
My main goal here is:
To make everything dynamic... without question.
- I'm puzzled as to why changing the name or date in my input fields at the top doesn't update the red bars below (it seems like they're not observable...)
- I've also included a "get data" button to view my updated JSON, but it only returns
[object, Object]...
In addition to resolving these issues, I'd like to explore the possibility of creating draggable red bars that can update the dates at the top... if that's achievable.
Here's a snippet of my small app:
function App($scope) {
$scope.windows = [
{"name":"First Window","from":"2013-11-05","to":"2013-11-21"},
{"name":"Second","from":"2013-11-10","to":"2013-11-30"},
{"name":"Another One","from":"2013-11-17","to":"2013-11-20"}
];
$scope.addWindow = function() {
$scope.windows.push({"name":"insert name","from":"2013-11-01","to":"2013-11-02"});
};
$scope.setWindow = function(from, to) {
var f = (from.split("-")[2]) * 40,
t = ((to.split("-")[2]) * 40) - f;
return { f: f, t: t };
};
$scope.getData = function() {
console.log($scope.windows);
};
};
The HTML structure looks something like this (I've omitted the "calendar"):
<div ng-app ng-controller="App">
<section id="window-data">
<div ng-repeat="window in windows">
<label>Name:<input value="{{window.name}}"></label> <label>From:<input type="date" value="{{window.from}}"></label> <label>To:<input type="date" value="{{window.to}}"></label>
</div>
<button id="add-window" ng-click="addWindow()">Add Window</button>
</section>
<section id="window-display">
<div id="date-labels">
<div class="block">
<span class="rotate">2013-11-01</span>
</div>
<div class="block">
<span class="rotate">2013-11-02</span>
</div>
...
</div>
<div id="windows">
<div class="window-container" ng-repeat="window in windows">
<span class="window" style="left:{{setWindow(window.from, window.to).f}}px; width:{{setWindow(window.from, window.to).t}}px">{{window.name}}</span>
</div>
</div>
</section>
<button id="get-data" ng-click="getData()">Get Data</button>
</div>
If you know of any helpful websites with clear and comprehensive documentation, examples, etc., please do share them with me.