I thank you for your time viewing this newbish jubmled up question/post and ask for your most kindest regards while I attempt to get help!
I am trying to set up an reveal modal to drop down with some angular.js linking in the controller for data and am having trouble! Keep in mind the code is not complete, but here is what I am attempting to do:
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-6 columns"><h1>Full Course Search</h1>
<div>
<label>Filter:</label>
<input type="text" ng-model="searchTxt" placeholder="Enter a class here">
<hr></div>
</div>
<!-- <h1>Test {{searchTxt}}!</h1>-->
</div>
<table ng-controller="oflClassCtrl">
<thead>
<tr>
<th>Course Title(Apex/Isis)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "c in classes | filter:searchTxt">
<td><td><a href="#" data-reveal-id="myModal" ng-click="setClass($index)">{{c.class}}</a></td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="myModal" class="reveal-modal" data-reveal>
<div class="accordion accorborder" ng-controller="oflClassCtrl" data-accordion>
<div class="accordion-navigation">
<h3>{{c.class}} </h3>
<div id="p1" class="content">
<div class="row">
<div class="small-6 columns">
<h6>Code:</h6>{{c.code}}
<h6>Offerings:</h6>{{c.offerings}}
</div>
<div class="small-6 columns">
<h6>Course Materials:</h6>
<ul>
<li>
<a href="{{c.syl}}">Syllabus</a>
</li>
<li>
<a href="{{c.cc}}">Course Contract</a>
</li>
<li>
<a href="{{c.wb}}">White Board</a>
</li>
</ul>
</div>
</div>
<p>
{{c.para}}
</p>
<!-- Panels-->
<dl class="tabs" data-tab>
<dd class="active"><a href="#p1a">Study Sheets</a></dd>
<dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
<dd><a href="#p1c">Graded Assignments</a></dd>
<dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
</dl>
<div class="tabs-content">
<div class="content active" id="p1a">
<ul class="ss">
<li><a href="{{c.ssu1}}">Study Sheet Unit One</a></li>
<li><a href="{{c.ssu2}}">Study Sheet Unit Two</a></li>
<li><a href="{{c.ssu3}}">Study Sheet Unit Three</a></li>
<li><a href="{{c.ssu4}}">Study Sheet Unit Four</a></li>
<li><a href="{{c.ssu5}}">Study Sheet Unit Five</a></li>
</ul>
</div>
<div class="content" id="p1b">
<ul class="ssa">
<li>
...................ectt...........
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
Then, the angular controller, also not linked properly im sure:
var oflApp = angular.module('oflApp', []);
oflApp.controller('oflClassCtrl', function ($scope) {
$scope.classes = [
{"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"},
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 1"},
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 2" },
{"class": "ENGLISH III: AMERICAN LITERATURE Sem 1" },
{"class": "ENGLISH III: AMERICAN LITERATURE Sem 2"},
{"class": "ENGLISH IV: BRITISH AND WORLD LITERATURE Sem 1"},
{"class": "ENGLISH IV: BRITISH AND WORLD LITERATURE Sem 2"},
{"class": "AP ENGLISH LANGUAGE AND COMPOSITION Sem 1"},
{"class": "AP ENGLISH LANGUAGE AND COMPOSITION Sem 2"},
{"class": "ENGLISH I: INTRO TO LIT & COMP LIT ADVANTAGE Sem 1"},
{"class": "ENGLISH I: INTRO TO LIT & COMP LIT ADVANTAGE Sem 2"},
{"class": "ENGLISH II: CRIT READING & EFFECTIVE WRITING LIT ADV Sem 1"},
{"class": "ENGLISH II: CRIT READING & EFFECTIVE WRITING LIT ADV Sem 2"},
{"class": "AP ENGLISH LITERATURE AND COMPOSITION Sem 1"},
{"class": "AP ENGLISH LITERATURE AND COMPOSITION Sem 2"},
{"class": "MULTICULTURAL STUDIES ALGEBRA 1 SEM 1"},
...ect....
];
$scope.setClass = function(index) {
$scope.selectedClass = $scope.classes[index];
};
});
What can I do to get this to work properly? Finally, a link to the live test site: http://new.omegadesignla.com/courses/classlist.php
I can recommend using Angular Foundation's port for Foundation's Reveal, named Modal.
If you don't wish to use that you could create a directive, wrapping the Foundation Reveal. An example:
directives.directive('notification', ['$timeout', function ($timeout) {
return {
restrict: 'E',
transclude: true,
scope: {
name: '@',
header:'@',
show: '=',
timeout: '@?'
},
link: function(scope, element, attrs, controller, transclude) {
transclude(scope, function(clone){
scope.notification = clone.text();
});
scope.$watch('show', function (show) {
if (show) {
var reveal = angular.element('#' + scope.name);
reveal.foundation();
reveal.foundation('reveal', 'open');
if (scope.timeout) {
$timeout(function () {
reveal.foundation('reveal', 'close');
}, scope.timeout);
}
scope.show = false;
}
});
},
templateUrl: 'includes/notification.html'
};
This 'notification' can be added to you HTML, like:
<notification name="notificationName" header="Some header..."
show="showNotification" timeout="7000">
Some text...
</notification>