Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Ryan Hellerud
Ryan Hellerud
3,635 Points
Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

how complex is this to implement? Angular js

So i would like to use angular with a modal pop up and tabs. The only real way I've seen to do this is to use angular-foundation add on http://pineconellc.github.io/angular-foundation/#/modal .

for example, i would like to recreate the contents of the accordions: http://new.omegadesignla.com/courses/math.php and display the correct data in a modal pop up, based on the class clicked here: http://new.omegadesignla.com/courses/classlist.php

The problem is, it seems pretty complex to implement both and the wiring to get tabs in a modal to display data based on an ng-click index. So far, I've added some course info in a ng-reapet and that part is working.

So far i've got the ng-repeat working and in my controller im working on something like:

(function(){    
angular.module('oflApp', ['mm.foundation'])
.controller('oflClassCtrl', ['$scope', '$http','$modal', oflClassCtrl]);

function oflClassCtrl($scope, $http, $modal) {

    $scope.clickToOpen = function(index){
    $scope.selectedClass= $scope.classes[index];
    $modal.open({
        templateUrl: '../inc/popUp.html',
                });

    };

$scope.classes =      [
{"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2" },
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 1"}, ect

  ];

}})();

and in my html i have something like:

<div class="row" ng-controller="oflClassCtrl">
    <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 >
  <thead>
    <tr>
      <th>Course Title(Apex/Isis)</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat = "selectedClass in classes | filter:searchTxt">
        <td><a  ng-click="clickToOpen($index)">{{selectedClass.class}}</a></td>
<!--        data-reveal-id="myModal"-->
    </tr>

I was reading the docs and it looks like i'd need mutiple controllers and would need to pass some data between the different controllers? Can anyone help me on wiring this correctly?

3 Answers

jdh
jdh
12,334 Points
jdh
jdh
12,334 Points

Ryan Hellerud - I can try to help you with this? So, you're looking to create a modal that has accordions in it for the list of classes from your link?

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

hi just saw this, sorry for the late reply. I ended up getting the modal working but have not with the course data the way i was thinking about doing it originally. I'm just planning on putting our new class files in the modal pop ups.

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

I've only done a few angularJS apps, but I whenever I've done this I would have two controllers. Your oflClassCtrl controller and then one that controls your modal which you would call with the modal.open.

Right from the example you linked to:

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

the templateUrl is your template for your modal. I personally include these on my pages using a script tag, but I know some people don't like that.
the controller is the controller that runs your modal.
and resolve is the data being passed to your modal controller (which will be accessed as locals in that controller)

then you if you follow the example above you can pass data back from the modal controller ( i.e. $modalInstance.close($scope.selected.item); ) and use that data in your original controller via modalInstance.result.then(function (selectedItem) { ....}

I would suggest working straight form the template in the example you linked to. The tabs are just going to be in your template section. You may even have a third controller that runs the tabs. I'm not an AngularJS pro so I do stuff kind of hacky like constantly creating controllers when there are better ways to do it.

jdh
jdh
12,334 Points
jdh
jdh
12,334 Points

Ryan Hellerud - what was the way you were thinking of doing it? If I understand correctly, you're trying to create a modal with a collapsible (accordion-style) you should just run an ng-repeat on the on the accordion and create some JSON for the courses.

  <accordion>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
</accordion>
Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

well i have implemented the modal however i'm not planning on implementing the accordions on the page but would think about implementing the course data straight just into the modal in some form of template from a json file if I am able to do it that way. right now i have something like the modal working, link is : http://new.omegadesignla.com/courses/classlist.php

as for now its fine the way it is its just a matter of making things a little nicer and easier access.