<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body ng-app="app" class="container">
<div ng-controller="mainController as main">
<button class="btn btn-default" ng-click="main.clearTitle()">Clear Title</button>
<select ng-model="main.selectedTitle" ng-options="title for title in main.titles" class="form-control"></select>
<button class="btn btn-default" ng-click="main.clearGenre()">Clear Genre</button>
<select ng-model="main.selectedGenre" ng-options="genre for genre in main.genres" class="form-control"></select>
<button class="btn btn-default" ng-click="main.clearYear()">Clear Year</button>
<select ng-model="main.selectedYear" ng-options="year for year in main.years" class="form-control"></select>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Category</th>
<th>Released</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in main.movies | filter:{ genre: main.selectedGenre, released: main.selectedYear, title: main.selectedTitle}">
<td>{{movie.title}}</td>
<td>{{movie.genre}}</td>
<td>{{movie.released}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(function(){
var app = angular.module("app", []);
app.controller("mainController", function($scope, movieData) {
var typeOf = this;
typeOf.movies = [];
typeOf.movies = movieData.getAll();
typeOf.titles = _.chain(typeOf.movies).pluck("title").uniq().sortBy().value();
typeOf.genres = _.chain(typeOf.movies).pluck("genre").uniq().sortBy().value();
typeOf.years = _.chain(typeOf.movies).pluck("released").uniq().sortBy().value();
typeOf.clearTitle = function(){
typeOf.selectedTitle = undefined;
};
typeOf.clearGenre = function(){
typeOf.selectedGenre = undefined;
};
typeOf.clearYear = function(){
typeOf.selectedYear = undefined;
};
});
app.factory("movieData", function(){
var movies = [
{
title: "Godzilla",
genre:"Action",
released: 2014
},
{
title: "Tarzan",
genre: "Action",
released: 2013
},
{
title: "Edge Of Tomorrow",
genre: "Action",
released: 2014
},
{
title: "Neighbors",
genre: "Comedy",
released: 2014
},
{
title: "Frozen",
genre: "Comedy",
released: 2013
},
{
title: "Into The Woods",
genre: "Musical",
released: 2014
},
{
title: "Tangled",
genre: "Musical",
released: 2010
}
];
return {
getAll: function(){
return movies;
}
};
});
}());
/* Styles go here */