<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body ng-app="app">
<div ng-controller="UsersController as vm">
<div class="container">
<div class="col-md-3 col-md-offset-9 dropdown-meditation">
<div class="button-group">
<select class="btn btn-default btn-md dropdown-toggle dropdown-text" ng-model="vm.option">
<option value="" disabled selected>Sort Events By</option>
<option value="date">By Date (Asc)</option>
<option value="-date">By Date (Desc)</option>
<option value="meditation.name">By Meditation</option>
<option value="minutes">By Minutes</option>
</select>
</div>
</div>
<br>
<div ng-repeat="event in vm.user.events | filter: query | orderBy: vm.option">
<p style="text-decoration: none">{{event.date | date: medium}} for {{event.minutes}} minutes —
{{event.meditation.name}}</p>
</div>
</div>
</div>
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
/* Styles go here */
(function() {
angular
.module('app', [])
.controller('UsersController', [function() {
var vm = this;
vm.option = "date";
// This is a snippet of serialized JSON with nested associations
// events is a joins table. I originally used Rails as an API on the backend
// with Active Model Serializer to create the JSON and associations
vm.user = {
id: 1,
username: "foobar",
events: [
{
id: 38,
user_id: 1,
meditation_id: 3,
minutes: 12,
date: "2017-03-07T03:40:07.324Z",
meditation: {
id: 3,
name: "Zen Meditation"
}
},
{
id: 40,
user_id: 1,
meditation_id: 1,
minutes: 25,
date: "2017-03-07T03:43:36.126Z",
meditation: {
id: 1,
name: "Mindfulness"
}
},
{
id: 41,
user_id: 1,
meditation_id: 1,
minutes: 10,
date: "2017-03-07T22:37:05.614Z",
meditation: {
id: 1,
name: "Mindfulness"
}
},
{
id: 42,
user_id: 1,
meditation_id: 6,
minutes: 26,
date: "2017-03-15T21:41:32.213Z",
meditation: {
id: 6,
name: "Transcendental Meditation (TM)"
}
},
{
id: 44,
user_id: 1,
meditation_id: 2,
minutes: 24,
date: "2017-03-24T21:54:18.976Z",
meditation: {
id: 2,
name: "Metta (Loving-Kindness)"
}
},
{
id: 45,
user_id: 1,
meditation_id: 4,
minutes: 55,
date: "2017-03-07T23:19:19.244Z",
meditation: {
id: 4,
name: "Qigong (Chi Gong)"
}
},
{
id: 46,
user_id: 1,
meditation_id: 2,
minutes: 34,
date: "2017-03-08T00:18:44.205Z",
meditation: {
id: 2,
name: "Metta (Loving-Kindness)"
}
},
{
id: 47,
user_id: 1,
meditation_id: 2,
minutes: 2,
date: "2017-03-02T00:19:51.818Z",
meditation: {
id: 2,
name: "Metta (Loving-Kindness)"
}
},
{
id: 53,
user_id: 1,
meditation_id: 1,
minutes: 13,
date: "2017-03-08T01:26:52.618Z",
meditation: {
id: 1,
name: "Mindfulness"
}
},
{
id: 54,
user_id: 1,
meditation_id: 1,
minutes: 15,
date: "2017-03-15T00:27:42.885Z",
meditation: {
id: 1,
name: "Mindfulness"
}
},
{
id: 55,
user_id: 1,
meditation_id: 4,
minutes: 28,
date: "2017-03-08T01:29:40.013Z",
meditation: {
id: 4,
name: "Qigong (Chi Gong)"
}
},
{
id: 56,
user_id: 1,
meditation_id: 2,
minutes: 2,
date: "2017-04-08T00:37:57.805Z",
meditation: {
id: 2,
name: "Metta (Loving-Kindness)"
}
}]
};
}])
}());