using angular to display data in reveal modal (zurb foundation)

Question

Trying to use angular so that when an anchor is clicked will display relevant data in a reveal modal.

First, I've put everything on one page, so that I can have the foundation modal reveal try to work. Maybe I should use the angular UI one instead? Here's what I have so far:

<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><a href="{{c.href}}"  ng-click="setClass($index)">{{c.class}}</a></td>
    </tr>
  </tbody>

</table>
    </div>
</div>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<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">&#215;</a>
</div>

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];
        };    

});

Answer 1 · 2014-12-16T23:36:37Z

December 16, 2014 11:36pm

I'm not exactly sure what it is you are trying to do, but if you're using Angular, you probably don't need to bother with IDs.

This is what I interpreted from your question, but please let me know if this isn't correct. What you want to do is:

Have a user click on a course, be taken to a general courses page (/courses for instance) and show an accordion with the class the user clicked on open by default.

To do something like that, just make sure that both views are tied to the same controller. Then when a user clicks on a course, you can set a scope object of that controller to true using ng-click and passing the current item as a parameter (assuming you're using something like ng-repeat to display the results).

This is a simple example of how that would work:

angular.module('myApp').controller('CoursesCtrl', function ($scope) {

$scope.selectCourse = function(clickedItem) {
$scope.selectedCourse = clickedItem;
}
});

Then on your accordion, you can check if the item matches selectedCourse, and if so, expand the accordion. You can do this in several different ways in Angular, ng-show and ng-class just being a couple good options. But it all really depends on your implementation.

If you post some of your code or more information on what exactly you are trying to do I'll be able to help more, but I hope that at least sets you on the right track!

-Nick

Answer 2 · 2014-12-19T20:29:06Z

December 19, 2014 8:29pm

So, it seems like there's a bit of a confusion with some of the UI component terms here. I've seen three different components mentioned: dropdowns, accordions and modals. Each of these are different things. You've mentioned a "dropdown modal." Are you talking about a dropdown (or select box), or modal (a pop-up modal window)?

For either of these, checkout [Angular UI Bootstrap]9(http://angular-ui.github.io/bootstrap/). They have really handy components including both dropdowns and modals that are built for angular.

I suggest you take a look at those and try to build the UI without worrying about the data much just yet. Once you have the basic UI flow working, I can help you making sure that the data for each class shows up where you want it to. I just don't want to get too in-depth on passing data between directives and scopes until you have something built.

It's really easy to get overwhelmed trying to figure out how AngularJS works, so my suggestion is always start with the smallest baby step possible towards your intended result. Try to get the UI sorted out first and I'll help out if you get stuck.

Welcome to the Treehouse Community

Looking to learn something new?

Ryan Hellerud

Ryan Hellerud

using angular to display data in reveal modal (zurb foundation)

2 Answers

Nick Ocampo

Nick Ocampo

Nick Ocampo

Nick Ocampo

Ryan Hellerud

Ryan Hellerud