I am having a ng-repeat with one array and three objects within an array.
and I am calling a function from img src="{{}}" which is in ng-repeat.
So as per concept an img src function should get called 3 times (because I have 3 objects in an array), but it gets called 15 times.
<div class="" ng-init="getCurrentModuleId();"> <!-- 1st image row start -->
<div class="" ng-repeat="obj in courseModuleData"
ng-click="getStartFunction($index + 1);">
<a href="javascript:;" class="hoverStyle">
<img id="{{$index + 1}}" src="{{getLockPlayImage($index + 1);}}"
class="tresure_img">
</a>
</div>
</div>
js code:-
function getLockPlayImage(id) {
$log.info("Welcome to getLockPlayImage function");
var el = document.getElementById(id);
el.style.top = $scope.courseModuleData[id - 1].cordinates.x + "px";
el.style.left = $scope.courseModuleData[id - 1].cordinates.y + "px";
if (getModuleId.module_id == id) {
$scope.getImage = "img/start/playbutton_normal.png";
/*var el =document.getElementById(id);
el.setAttribute('ng-click', 'startQuestions()');*/
} else {
$scope.getImage = "img/start/lock_normal.png";
}
return $scope.getImage;
}
function getCurrentModuleId() {
var _promiseObject = new promise.Promise();
$log.info("Welcome to getLock getCurrentModuleId function");
var getActModule = $scope.startModule();
getActModule.then(function (result) {
_promiseObject.done(false, "Downloaded");
getModuleId = result.rows.item(0);
});
}
Related
how do I bind a ko.observablsArray inside an array? I have the following viewModel:
function GetBegriffsKetteViewModel () {
var self = this;
self.Begriffsketten = ko.observableArray();
self.letzterBegriff = ko.observable(0);
self.aktuelleKette = -1;
}
var Begriffskette = function () {
var self = this;
var begriffe = new ko.observableArray();
var begriffBez = new ko.observableArray();
}
And in my html I have the following div:
<div id="ausgewaehlteKetten" data-bind="foreach : Begriffsketten">
<div class="row">
<div class="col-md-2" id="innerDivForEach" data-bind="foreach : begriffBez">
<span data-bind="text: $data" ></span>
</div>
</div>
</div>
If I run this code I get the following error:
ReferenceError: begriffBez is not defined
Is there a way to bind an array inside an array? What am I doing wrong?
Thanks
Thomas
First, you should not create knockout objects with new.
wrong: var x = new ko.observable();
correct: var x = ko.observable();
Second, if you want a variable to become an object property, you must assign it to the object instance (this - or, in your case, self).
Minor point: By convention, only constructors should start with a captital letter in JS. So since it's a regular property it would be begriffsketten with a lowercase b.
function BegriffsKetteList() {
var self = this;
self.begriffsketten = ko.observableArray();
self.letzterBegriff = ko.observable(0);
self.aktuelleKette = ko.observable(); // better use an observable here
}
function Begriffskette() {
var self = this;
self.begriffe = ko.observableArray();
self.begriffBez = ko.observableArray();
}
Once you do that, knockout can see the begriffBez and begriffe properties when it renders the view.
<div id="ausgewaehlteKetten" data-bind="foreach: begriffsketten">
<div class="row">
<div class="col-md-2" id="innerDivForEach" data-bind="foreach: begriffBez">
<span data-bind="text: $data" ></span>
</div>
</div>
</div>
I able to embed the 4 videos in a particular div using "angular.js".But,I have so many videos nearly 20.
So,what I'm trying to do is,on click of "Next" button should get next 4 videos in a same div.How can I achieve this?
Can anyone please help me out regarding this issue ...
My html code:
<div class="panel-body">
<video width=176 height=99 style=" margin-left: 10px; margin-right: 10px;"
ng-repeat="videoSource in videoSources track by $index" autoplay
controls ng-src="{{videoSource | trustUrl}}">
</video>
<br> <a href="#" ng-click='loadVideos()'>Load videos</a>
<br><button type="button">Next</button>
</div>
My js code:
angular.module('Admin', [])
.controller('Home', function($scope) {
$scope.videoSources = [];
$scope.loadVideos = function() {
$scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
$scope.videoSources.push('http://54.88.118.248/Video/Customer_Service.mp4');
$scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
$scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
$scope.videoSources.push('http://54.88.118.248/Video/Customer_Service.mp4');
$scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
};
})
.filter("trustUrl", ['$sce',
function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}
]);
The actual Angular way would be to create a custom filter to paginate the results. In the example, I've created a paginate filter that takes two parameters: pageNum and pageSize to slice the input array into the required chunk without any pre-processing of the array required.
Also added the necessary next and previous buttons and hid the load videos button.
angular.module('Admin', [])
.controller('Home', function($scope) {
$scope.pageNum = 0;
$scope.pageSize = 4;
$scope.isFirstPage = function() {
return $scope.pageNum === 0;
};
$scope.isLastPage = function() {
return $scope.pageNum >= Math.floor($scope.videoSources.length / $scope.pageSize);
};
$scope.prevPage = function() {
$scope.pageNum--;
};
$scope.nextPage = function() {
$scope.pageNum++;
};
$scope.videoSources = [];
$scope.loadVideos = function() {
for (var i = 0; i < 6; i++) {
$scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/boat_149.webm');
$scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/horse_riding_205.webm');
$scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/flower_124.webm');
}
};
})
.filter("trustUrl", ['$sce',
function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}
])
.filter('paginate', function() {
console.log('creating paginate function', arguments);
return function(inputArray, pageNumber, pageSize) {
console.log('paginating', arguments);
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
if (!Array.isArray(inputArray)) return inputArray;
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="panel-body" ng-app="Admin" ng-controller="Home">
<video width=176 height=99 ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index" autoplay controls ng-src="{{videoSource | trustUrl}}">
</video>
<div ng-show="videoSources.length">
<button ng-disabled="isFirstPage()" ng-click="prevPage()">Previous</button>
<button ng-disabled="isLastPage()" ng-click="nextPage()">Next</button>
</div>
<div ng-hide="videoSources.length">
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
And because I felt like playing around with the code some more, here's a version that makes a pagination object, so that the functionality can be reused in different controllers and directives:
angular.module('Admin', [])
.controller('Home', function($scope, Pagination) {
$scope.videoSources = [];
$scope.pagination = new Pagination(4);
$scope.loadVideos = function() {
for (var i = 0; i < 6; i++) {
$scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/boat_149.webm');
$scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/horse_riding_205.webm');
$scope.videoSources.push('http://images.all-free-download.com/footage_preview/webm/flower_124.webm');
}
};
})
.factory('Pagination', function() {
var Pagination = function(pageSize) {
this.pageSize = pageSize || 4;
this.pageNum = 0;
this.sourceLength = 0;
};
Pagination.prototype.isFirstPage = function() {
return this.pageNum === 0;
};
Pagination.prototype.isLastPage = function(sourceLength) {
return this.pageNum >= Math.floor((sourceLength || this.sourceLength) / this.pageSize);
};
Pagination.prototype.prevPage = function() {
this.pageNum--;
};
Pagination.prototype.nextPage = function() {
this.pageNum++;
};
Pagination.prototype.setPage = function(pageNum) {
this.pageNum = pageNum;
};
Pagination.prototype.setPageSize = function(pageSize) {
this.pageSize = pageSize;
};
Pagination.prototype.setSourceLength = function(sourceLength) {
this.sourceLength = sourceLength;
}
Pagination.prototype.getPage = function() { return this.pageNum; };
Pagination.prototype.getPageSize = function() { return this.pageSize; };
Pagination.prototype.getSourceLength = function() { return this.sourceLength; };
return Pagination;
})
.filter("trustUrl", ['$sce',
function($sce) {
return function(recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}
])
.filter('paginate', function() {
console.log('creating paginate function', arguments);
return function(inputArray, pageNumber, pageSize) {
console.log('paginating', arguments);
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
if (pageNumber && pageNumber.pageSize) pageSize = pageNumber.pageSize;
if (pageNumber && pageNumber.pageNum !== undefined) pageNumber = pageNumber.pageNum;
if (!Array.isArray(inputArray)) return inputArray;
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="panel-body" ng-app="Admin" ng-controller="Home">
<video width=176 height=99 ng-repeat="videoSource in videoSources | paginate:pagination track by $index" autoplay controls ng-src="{{videoSource | trustUrl}}">
</video>
<div ng-show="videoSources.length">
<button ng-disabled="pagination.isFirstPage()" ng-click="pagination.prevPage()">Previous</button>
<button ng-disabled="pagination.isLastPage(videoSources.length)" ng-click="pagination.nextPage()">Next</button>
</div>
<div ng-hide="videoSources.length">
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
The filter now looks a bit stranger, because I wanted to keep the option to use it as paginate:pageNumber:pageSize but also allow it to be used as paginate:paginationObject and that took a little trickery. But now, our pagination functionality is abstracted away into a factory so it can be reused and keep our controller lean, and that is the Angular Way(TM) :D
Edit: Extra paginate filter explanation:
.filter('paginate', function() {
a console.log() call I used to debug that I forgot in here
console.log('creating paginate function', arguments);
To be able to accept parameters in an Angular filter, you have to return a function that needs those parameters from the filter function
return function(inputArray, pageNumber, pageSize) {
Another debugging console.log() call
console.log('paginating', arguments);
We can't be sure the parameters were passed in, so we provide sensible defaults (in this case, if pageNumber wasn't given, we'll set it to 0 and if pageSize wasn't given, we'll set it to 4)
pageNumber = pageNumber || 0;
pageSize = pageSize || 4;
Because we want to be able to pass in a Pagination object as a parameter instead of a page number & page size, we see if the first parameter isn't by chance an object containing pageSize and/or pageNum members, and if it is, we set the local pageNumber and pageSize variables to the values of the Pagination object's members
if (pageNumber && pageNumber.pageSize) pageSize = pageNumber.pageSize;
if (pageNumber && pageNumber.pageNum !== undefined) pageNumber = pageNumber.pageNum;
Then we check to see if the first parameter to the filter (the value being filtered) is actually an array. If it isn't, we just return the value unchanged. For example, if we were to have {{ 1 | paginate }} in an Angular template, the result would be 1, our algorithm wouldn't break. If it's an array, though, such as {{ [1, 2, 3, 4, 5] | paginate }} (with default paginate parameters) it would become [1, 2, 3, 4] and {{ [1, 2, 3, 4, 5] | paginate:0:2 }} would become [1, 2].
if (!Array.isArray(inputArray)) return inputArray;
And then the actual pagination logic (funny how it's way smaller than the input checking part of the code). We slice the input array to start at index pageNumber * pageSize and to end at index (pageNumber + 1) * pageSize (non-inclusive). Think of the first page (for pageSize = 4) having page number 0 and starting at index 0 and finishing at index 3 (so ending at index 4 (= 1 * 4) non-inclusive), page two having page number 1 and starting at index 4 (= 1 * 4) and finishing at index 7 (index 8 (= 2 * 4) non-inclusive, and so on. More information on Array.prototype.slice()
return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
};
});
Without sliding effect, you can do it with pages:
Change loading videos:
$scope.videoSources.push({url:'video_here');
Then, page them:
var page = 1, perpage = 4;
$.each($scope.videoSources, function(k, v) {
v.page = (page++)/perpage;
Now that we have pages, in your HTML you can filter your data:
ng-repeat="video in videoSources | filter: {page: current_page}"
And next page ng-click:
ng-click="current_page++"
Same for previous page.
**Important noticing: because I changed your array to contain objects, to access the video you need to use video.url in your ng-src
I've been facing an issue since couple of hours. My view template looks like-
<div class="row" ng-repeat="row in CampaignsService.getRows().subItems track by $index">
<div class="col-sm-2">
<select class="form-control dropDownPercent" ng-model="CampaignsService.dropDownPercent[{{CampaignsService.selectCounter}}]" ng-change="CampaignsService.wow(CampaignsService.dropDownPercent, $index)" ng-options="o as o for o in CampaignsService.showPercentDropDown().values">
</select>
</div>
<div class="col-sm-2" style="line-height: 32px">
of visitors send to
</div>
<div class="col-sm-4">
<select class="form-control" ng-model="campaignSelect" ng-options="campaign.Campaign.id as campaign.Campaign.title for campaign in CampaignsService.getRows().items">
<option value=""> Please select </option>
</select>
</div>
<div class="col-sm-4">
<a class="btn btn-default" target="_blank" href="">Show campaign</a>
</div>
Variable CampaignsService.selectCounter is a counter variable and declared in service but when I'm going to use ng-model="CampaignsService.dropDownPercent[{{CampaignsService.selectCounter}}]" it gives me error -
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 35 of the expression [CampaignsService.dropDownPercent[{{CampaignsService.selectCounter}}]] starting at [{CampaignsService.selectCounter}}]]
And when I use ng-model="CampaignsService.dropDownPercent['{{CampaignsService.selectCounter}}']" it does not give any error but it takes this variable as string.
My question is how could I create a model array and get model's array values in my service ?? I read many questions in stack community and none of the trick work for me. My service under my script, is
.service('CampaignsService', ['$rootScope', 'AjaxRequests', function ($rootScope, AjaxRequests) {
this.dropDownPercent = [];
this.selectCounter = 0;
var gareeb = [];
this.showPercentDefault = 100;
// this.campaignsData = [];
this.$rowsData = {
items: [], //array of objects
current: [], //array of objects
subItems: [] //array of objects
};
this.getRows = function () {
return this.$rowsData;
}
this.addNewRow = function () {
var wowRow = {}; //add a new object
this.getRows().subItems.push(wowRow);
this.selectCounter++;
gareeb.push(0);
}
this.calculatePercentages = function (index) {
angular.forEach(this.getRows().current, function (data, key) {
if (key == index) {
console.log(data);
}
})
}
this.showPercentDropDown = function ($index) {
var balle = 0;
var start;
angular.forEach(gareeb, function (aha, keywa) {
balle += aha;
})
var last = 100 - balle;
var final = [];
for (start = 0; start <= last; start += 10) {
final.push(start);
}
return this.values = {
values: final,
};
}
this.wow = function (valueWa, keyWa) {
console.log(this.dropDownPercent);
gareeb[keyWa] = valueWa;
this.changePercentDropDown();
}
this.changePercentDropDown = function () {
var angElement = angular.element(document.querySelector('.dropDownPercent'));
angular.forEach(angElement, function (data, key) {
console.log(data);
})
}
}])
Target model structure should be
ng-model="CampaignsService.dropDownPercent[1]"
ng-model="CampaignsService.dropDownPercent[2]"
ng-model="CampaignsService.dropDownPercent[3]"
A big thanks in advance.
Since you are in context of the Angular expression, you don't need interpolation tags {{...}}. So ngModel directive should look like this:
ng-model="CampaignsService.dropDownPercent[CampaignsService.selectCounter]"
I'm learning AngularJS following the good Pro AngularJS written by Adam Freeman.
I'm stuck on ng-repeat pagination using filters. I know there are bootstrap ui directives for Angular, but i'm following this book in order to learn how angular works.
My code:
<section class="row-fluid" ng-controller="GetAjax">
<div class="col-md-12">
<h2>Repater Caricato in Ajax</h2>
</div>
<div class="row-fluid">
<div class="col-md-6" style="max-height: 350px; overflow-y: auto" ng-controller="PagedData">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in data.visitors | filter:query | range:selectedPage:pageSize">
<b>{{item.id}}.</b> {{item.first_name}} {{item.last_name}} | <small><i>{{item.email}} - {{item.country}} {{item.ip_address}}</i></small>
</li>
</ul>
<ul class="pagination">
<li ng-repeat="page in data.visitors | pageCount:pageSize"
ng-click="selectPage($index + 1)"
ng-class="pagerClass($index + 1)">
<a>{{$index + 1}}</a>
</li>
</ul>
</div>
</div>
</section>
Angular filters
angular.module("customFilters")
/******* Filters per la paginazione dei dati ******************/
//Genera il range di dati in base alla page size
.filter("range", function ($filter) {
return function (data, page, size) {
if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
var start_index = (page - 1) * size;
console.log(data.length);
if (data.length < start_index) {
return [];
} else {
return $filter("limitTo")(data.splice(start_index), size);
}
} else {
return data;
}
}
})
//Calcola il numero di pagine
.filter("pageCount", function () {
return function (data, size) {
if (angular.isArray(data))
{
var result = [];
for (var i = 0; i < Math.ceil(data.length / size) ; i++) {
result.push(i);
}
return result;
}
else
{
return data;
}
}
});
Angular Controller
.controller("GetAjax", function($scope, $http){
$http.get('data/visitors.json').success(function(data) {
$scope.data = {visitors : data};
});
})
.constant("activeClass", "active")
.constant("perPage", 30)
.controller("PagedData", function($scope, $filter, activeClass, perPage){
$scope.selectedPage = 1;
$scope.pageSize = perPage;
console.log("page"+ $scope.selectedPage);
$scope.selectPage = function (newIndex) {
$scope.selectedPage = newIndex;
console.log( {idx: newIndex});
}
$scope.pagerClass = function (index) {
return (index == $scope.selectedPage) ? activeClass : "";
}
});
The result is that after 3 range filter invocations during the page render, the data array looses all the data.
Strange is that using the example from the book this code works perfectly.
Please, help me to know my error :D
splice function overwrites array
if you have an array
a = [1,2,3,4];
a.splice(2,1);
// a = [1,2,4]
results is a = [1,2,4]
use slice instead
I have an ngClick directive on elements that are also bound to $swipe. The ngClick doesn't fire (it was firing before the $swipe was added).
I'm using jQuery mobile combined with AngularJS.
Interestingly, my diagnostics show a swipe event with start and end the same - seems to contradict the minimum swipe distance, but perhaps the cancel function is being called. Possibly I could use the cancel function to find out where the click occurred but I feel I shouldn't have to do that.
The site is viewable at http://skimobile.cbdweb.net
HTML
<div id="matrix" data-role="page" ng-controller="matrixCtrl" ng-init="init()">
<div data-role="header">
<?php echo CHtml::encode($this->configs['SITENAME']); ?> Bookings
</div>
<div data-role="content">
<div class="lodgename noborder"> </div>
<div class="oneday onemonth" ng-repeat="m in months" ng-style="callMonthstyle(m)" ng-class="$last ? 'lastcol' : ''" on-finish-days>
{{monthNames[m.month]}} {{m.year}}
</div>
<br clear="both" />
<div class="lodgename noborder"> </div>
<div class="oneday" ng-style="callDaystyle()" ng-class="$last ? 'lastcol' : ''" ng-repeat="d in dates">
{{d.getDate()}}
</div>
<br clear="both" />
<div ng-repeat="lodge in data.lodges">
<div class="lodgename" ng-class="$last ? 'lastrow' : ''">{{lodge.lodgetitle}}</div>
<div class="oneday" ng-style="callDaystyle()" ng-class="($last ? 'lastcol' : '') + ' ' + ($parent.$last ? 'lastrow' : '')" ng-repeat="d in dates" ng-click="showDate(lodge, d)">
</div>
<br clear="both" />
</div>
<div ng-show="data.debug" style="margin-top: 20px;"
<ul>
<li>
move = {{swipe.move}}
</li>
<li>
start = {{swipe.start}}
</li>
<li>
end = {{swipe.end}}
</li>
<li>
scope.startDay = {{startDay}}
</li>
<li>
daysMoved = {{swipe.daysMoved}}
</li>
<li>
daysFinished = {{nDaysFinished}}
</li>
</ul>
</div>
<ul>
<?php foreach(Yii::app()->params['lodges'] as $lodgecode=>$lodge) {
echo "<li>" . $lodgecode . " = " . $lodge['lodgetitle'] . "</li>";
$lci = $this->lodgeconfigs[$lodgecode]['PREFIX_BOOKING_ID'];
echo "<LI>" . $lci . "</li>";
} ?>
</ul>
</div>
</div>
Javascript:
/* NG services */
var matrix = angular.module('Skimobile', ['ngTouch']);
matrix.factory('dayswidth', ['writeDays', function(){ // gets called on window change width
return function(scope, ww) {
var lodgename = $('.lodgename').first().width() + 4; // 4 = padding in lodgename class
var padding = 60 + lodgename;
var oldDisplayDays = scope.displayDays;
scope.displayDays = Math.min(28, (ww - padding)/scope.mindaywidth); // show at most 28 days, fewer if needed to maintain minimum width
scope.dayWidth = Math.floor( (ww-padding) / scope.displayDays );
if(oldDisplayDays!=scope.displayDays) { // avoid changing scope.dates as this will cause infinite recursion in the $digest on ng-repeat d in dates
scope.callWriteDays();
}
};
}]);
matrix.factory('writeDays', function() {
return function(scope) {
var d = new Date();
d.setTime(scope.startDay.getTime());
scope.dates = []; // repeat on this to draw days
scope.months = []; // repeat on this to draw months
var yearShown = false; // only show year once, when the month is long enough
var m = d.getMonth();
var daysLeft = 0; // days shown belonging to each month
for(i=0; i<scope.displayDays; i++) {
scope.dates.push(new Date(d.getTime()));
var oldd = new Date(d.getTime());
d.setDate(d.getDate()+1);
daysLeft++;
var newm = d.getMonth();
if(newm!=m) { // finished a month, display it
var newMonthObj = {month:m, days:daysLeft};
if(!yearShown && daysLeft*scope.dayWidth-1-4>3*scope.mindaywidth) {
newMonthObj.year = oldd.getFullYear();
yearShown = true;
} else {
newMonthObj.year = '';
}
scope.months.push(newMonthObj);
m = newm;
daysLeft = 0;
}
}
if(daysLeft>0) { // final month
newMonthObj = {month:m, days:daysLeft};
newMonthObj.year = yearShown ? '' : oldd.getFullYear();
scope.months.push(newMonthObj);
}
}
});
matrix.factory('daystyle', function(){
return function(scope) {
return {
'width': (scope.dayWidth-1) + 'px'
}; // -1 allows for border
}
});
matrix.factory('monthstyle', function(){
return function(scope, m) {
var days = m.days;
return {
'width': (scope.dayWidth*days-1-4) + 'px'
} // 1 for border, 4 for padding-left
}
});
matrix.directive('onFinishDays', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if(scope.$last === true) { // without this it gets called once per visible month!
$timeout(function() {
scope.$emit('daysFinished');
})
}
}
}
});
/* NG controllers */
function matrixCtrl($scope, dayswidth, writeDays, daystyle, monthstyle, $swipe) {
$scope.callDayswidth = function(w){
dayswidth($scope, w);
};
$scope.callDaystyle = function() {
return daystyle($scope);
}
$scope.callMonthstyle = function(m) {
return monthstyle($scope, m);
}
$scope.callWriteDays = function() {
return writeDays($scope);
}
$scope.data = _main; // passed via Yii layout file
$scope.mindaywidth = 30;
$scope.monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var d = new Date(); // initially the matrix starts from today
$scope.startDay = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
var w = $(window);
$scope.getWindowDimensions = function() {
return {'h': w.height(), 'w': w.width()};
};
$scope.$watch($scope.getWindowDimensions, function(newValue, oldValue){
$scope.callDayswidth(newValue.w);
}, true);
w.bind('resize', function() {
$scope.$apply();
})
$scope.showDate = function(lodge, d){
alert(lodge.lodgetitle + ' ' + d.getDate());
}
$scope.swipe = {};
$scope.nDaysFinished = 0;
$scope.$on('daysFinished', function(event) {
$scope.nDaysFinished++;
$swipe.bind($('.oneday'), {
end:function(loc){
$scope.swipe.end = loc.x;
$scope.swipe.daysMoved = Math.floor((loc.x - $scope.swipe.start) / $scope.dayWidth);
$scope.startDay.setTime($scope.startDay.getTime() - $scope.swipe.daysMoved*24*60*60*1000); // compute new start day at end of drag;
$scope.callWriteDays();
$scope.$apply();
}
})
});
}