setting up angular-foundation to use reveal modal with angular

Question

So friends,

I'm trying to use reveal modal with angular because I have data that I would like to inject into the modal based upon a ng-click of links that are created by ng-repeat, allow me to present some code:

 <table ng-controller="oflClassCtrl">
  <thead>
    <tr>
      <th>Course Title(Apex/Isis)</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat = "selectedClass in classes | filter:searchTxt">
        <td><a href="#" data-reveal-id="myModal" ng-click="setClass($index)">{{selectedClass.class}}</a></td>

and controller:

var oflApp = angular.module('oflApp', []);

oflApp.controller('oflClassCtrl', function ($scope,$http) {

        // $http.get('../courses/coursedata.json');
      $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"},ect,

$scope.setClass = function(index) {
    $scope.selectedClass = $scope.classes[index];
        };    

});

I've looked over http://pineconellc.github.io/angular-foundation/ however im not sure do i just download a file and link it in head,and thhen add a new module?

All I want to do, is have my data show up in a reveal modal when a user clicks the relevant course that will be displayed with ng-repeat. I have a template layout out for that as well if it would be necessary for me to post it but basically just want it to render the class info.

can someone give me a breif example of how to set this up plz. Thank you.

score 2 · Accepted Answer · edited May 23 '17 at 10:24

You don't need to inject data into the modal if you place the modal code within the ng-repeat directive. You just need to dynamically generate data-reveal-id and the id of the modal itself using ng-attr to make sure that the data in the modal is associated with the link the user is clicking.

Plunker: http://plnkr.co/edit/RgtaJR?p=preview

In Angular you can easily set ids (and many other attributes) with ng-atrr

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers

https://docs.angularjs.org/guide/directive#text-and-attribute-bindings

In the Plunker, I added an id to your class object to create a unique identifier that we can append to the data-reveal-id and id of the modal. It's appended rather than prepended (ng-attr-data-reveal-id="Modal{{class.id}}") because querySelector doesn't like ids with leading integers. see here: Using querySelector with IDs that are numbers.

The advantage of this approach is that your controller is greatly simplified and it is clear what info is included in your modal.

I hope this helps.

setting up angular-foundation to use reveal modal with angular

1 Answers1