AngularJs Json Ng-repeat with Button Control

Question

Here is a project I am working on for fun trying to get used to the ng-repeat directive. I created the following so far.

Its working but I am attempting to add more to this to make it work better. I have been trying to add either buttons or a drop down menu to select part of my JSON to do the ng-repeat on.

In my example I have workout days with exercises.

I would like a drop down menu showing the days One thing I have been researching and haven't found much that is doing this.

Basically I want it to load the exercises from the JSON based on the selection of the drop down days menu all coming from my JSON file.

PLUNKER: http://plnkr.co/edit/IRis4l3r0MVCjpLNd3Q3

var app = angular.module('app', []).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
'self',
'http://*.bodybuilding.com/**'
]);
});
app.controller('homeCtrl', function($scope) {


$scope.data = {JSON FILE}

$scope.exercises = [];
angular.forEach($scope.data.day, function(day, index) {
  console.log(day);
  angular.forEach(day.exercises, function(exercise, index){
    //console.log(posters);
    $scope.exercises.push(exercise);
  });
});
console.log($scope.data);

});

*Any help would be appreciated.

Answer 1

I forked your plunker and the dropdown is now organized by your day array in $scope.data, and inside each dropdown item it is repeated each exercise name.

You could check it here:

http://plnkr.co/edit/DoIBDv2w0vY4zAWSq89D?p=preview

//Important html code
<li><a href="#" ng-repeat="day in data.day" ng-click="selectedDay($index)">day {{$index}}  |  <span ng-repeat="exercise in day.exercises">{{exercise.name}}</span></a></li>

Try clicking on a dropdown element.

Basically, you need a ng-repeat inside a ng-repeat, since you are iterating first over the days, and for each day you want to interate over it's exercises.

Hope I helped :)