I'm currently in the process of setting up a calendar of events using Angular within Wordpress. All files are linked correctly, but I'm struggling with configuring the template to display two different views - one for Saturday and another for Sunday.
Here is the layout I'm aiming to achieve (taken from an older version of the same site):
Although my Angular template functions well for all fields, I can't figure out how to showcase the large Saturday section once with its related events underneath, followed by a separate set for Sunday. I attempted creating a fiddle for demonstration purposes, but encountered issues. Apologies for not providing a working example: http://jsfiddle.net/roob/vxfbmsr8/2/
The controller in the fiddle is designed to extract all necessary data, yet it doesn't work as intended. Below is a condensed version of my actual code. It may seem lengthy, but I've included a few filter options for clarity. Please disregard the choice of table tags; they're not mine. template/view:
<div ng-app="myApp">
<div ng-controller="fobSchContr">
<h1>Event Directory</h1>
<label>search: </label>
<input ng-model="query" placeholder="Search for Authors" autofocus>
<select class="venues" id="filterTabs" ng-model="artistStage">
<option value="!!">ALL VENUES</option>
<option value ="Los Angeles Times Stage" id="lat-stage">LA Times Stage</option>
<option value ="Cooking Stage" id="cooking-stage">Cooking Stage</option>
<option value ="Hoy Stage" id="hoy-stage">Hoy Stage</option>
</select>
<select class="day" id="filterTabs" ng-model="artistDay">
<option value='!!' class="all">BOTH DAYS</option>
<option value ="Saturday" id="saturday">Saturday</option>
<option value ="Sunday" id="sunday">Sunday</option>
</select>
<select class="times" id="filterTabs" ng-model="artistTime">
<option value='!!' class="all">ALL TIMES</option>
<option value ="10.00 am" id="10am">10 a.m. - 11 a.m.</option>
<option value ="11.00 am" id="11am">11 a.m. - Noon</option>
</select>
<!-- Calendar BEGIN -->
<div class="filterWrap" style="border:#FFFFFF thin solid; text-align:">
...
</div>
</div>
</div>
</div>
controller:
var myApp = angular.module('myApp', []);
myApp.controller('fobSchContr', ['$scope', '$http', function($scope, $http) {
$http.get('wp-content/themes/2015-Festival-of-Books/angular/js/data.json').success(function(data) {
$scope.artists = data;
//$scope.artistOrder = 'first_name';
$scope.artistStage = '!!';
$scope.artistDay = '!!';
$scope.artistTime = '!!';
});
}]);