After watching some AngularJS videos and attempting to apply a filter to a list of bookmark categories, I'm having trouble loading the main content. At the moment, I haven't implemented views in my code and would like it to remain view-less for now.
The issue arises with the filter line - when I remove the curly braces around it, the bookmark list shows up but the filtering still doesn't work!
Please advise on what corrections need to be made.
Below is the code for INDEX.HTML
<!doctype html>
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<a href="#"><img class="logo" src="assets/img/eggly-logo.png"></a>
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
<a href="#" ng-click="setCurrentCategory(category)">{{category.name}}</a>
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button>
<a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
</div>
<hr/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app/eggly-app.start.js"></script>
</body>
JS FILE
angular.module('Eggly', [
])
.controller('MainCtrl', function($scope){
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks= [
{"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.currentCategory = setCurrentCategory;
});