I am currently working on creating a "members" page for a website that will feature 3 columns of pictures and names for each member. My goal is to allow users to click on a specific member's picture to access more detailed information about them through Foundation's modal feature. I have set up a repeater to display the pictures, but I am facing a challenge in passing the correct member data into the modal so that when a user clicks on person A, they will see person A's data displayed.
Here is an overview of my progress so far:
The member details are stored as a JSON list in a file named members.json:
{
"current" : [
{
"name": "Bob",
"pic": "http://www.placehold.it/300x300",
"id": "blah",
"position": "position 1",
"bio": "Hi I am Bob"
},
{
"name": "Bobby",
"pic": "http://www.placehold.it/300x300",
"id": "blah",
"position": "position 2",
"bio": "Hi I am Bobby"
}
]
}
Below is the code snippet for the controller that utilizes the JSON file:
var app = angular.module('app').controller('memberCtrl', ['$scope', '$http', function ($scope, $http) {
'use strict';
$http.get('/data/members.json').success(function(data) {
// logic to set up the members data for display
});
}]);
And here is the HTML code section related to the modal:
<div ng-controller="memberCtrl" id="myModal" class="reveal-modal">
<!-- Modal content structure -->
</div>
<div ng-controller="memberCtrl">
<!-- Iterating through member profiles to create the 3-column layout -->
</div>