There are two separate lists available - one containing blog posts and the other with authors.
var app = angular.module("Blog", []);
app.controller('PostCtrl', function($scope) {
$scope.posts = <%= @posts.to_json.html_safe %>;
$scope.authors = <%= @authors.to_json.html_safe %>;
});
This data is sourced from a database via Rails. For those unfamiliar with Rails, imagine working with a large JSON dataset.
First, let's display the blog posts:
<div id="blog-posts" ng-controller="PostCtrl">
<article class="post" ng-repeat="post in posts">
<h1> {{ post.title }} </h1>
<small> By {{ post.author }} on {{ post.created_at }} </small>
<p> {{ post.body }} </p>
</article>
</div>
Next, create an aside within the #blog-posts div (inside PostsCtrl) to list the authors:
<aside>
<h2> Authors </h2>
<ul>
<li ng-repeat="author in authors">
{{ author.name }}
</li>
</ul>
</aside>
In addition to displaying the authors, provide a feature for users to filter blog posts based on the selected author.
Main Question: How can users filter blog posts by clicking on an author?