I am listing project name from json result and display in side bar. When click on side bar listed any of project name it shows the details of it. Now i have search box to search projects and display project details and get selected project name in side bar.
here is the search box code :
<input class="form-control form-control-dark w-100" type="text" id="text" placeholder="Search" aria-label="Search">
here is the result of json:
"projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
Here i will be searching projectid, name or instance, etc.
here is the code used in html:
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div id="projectlist" class="sidebar-sticky">
<ul class="nav flex-column nav-pills">
{{range .Projects}}
<li class="nav-item" >
<a name="{{.ProjectID}}" class="nav-link" href="#">
<img class="img-fluid" style="width:8%"
src="static/image/generic_gcp.png">
{{.Name}}
<div>
<small>
ProjectId: {{.ProjectID}}
</small>
</div>
</a>
</li>
{{end}}
</ul>
<!-- Might need this seperator
<h6 class="sidebar-heading d-flex justify-content-between align-items-
center px-3 mt-4 mb-1 text-muted">
<span>Savings Reports</span>
</h6>
-->
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
{{range .Projects}}
<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class="h2">Project:{{.Name}}</h1>
How can list search and display project details and get selected in side bar of that project name.
Here is auto complete from Jquery ui:
$( function() {
var projects= [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
];
$( "#projects" ).autocomplete({
source: function (request, response) {
response($.map(projects, function (value, key) {
return {
label: value.name+" "+ value.projectid,
value: value.projectid
}
}));
},
select: function(event, ui) {
var res= $('#projects').val(ui.item.projectid);
}
});
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
SEarch: <input id="projects">
If you want source with ajax:
var url="";//your url to json file
source: function(request,response)
{
$.get(url, function(data)
{
obj = JSON.parse(data); //parse the data in JSON (if not already)
response($.map(obj, function(value, key)
{
return {
label: value.name+" "+ value.projectid,
value: value.projectid
}
}));
}
}
Related
i have JSON like below, in payment .. i can't get cash_payment's paid_amount or installment_payment's paid_amount and date as well
{
"response": [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "dokj",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},}
code below:
<template>
<div>
<!-- Header -->
<div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
<b-container>
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-5">
</b-col>
</b-row>
</div>
</b-container>
</div>
<!-- Page content -->
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" v-if="roles ==='Admin'">
<div class="text-center text-muted mb-4">
</div>
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option value="duhok" >doki</option>
>
</select>
<div v-if="City=='duhok'" v-for="(flat,index) in Flats" :key="index" v-show="flat.city=='doki'">
{{flat.city}} // i can get city easily
<pre style="color:white;" v-for="(find,indexT) in flat" :key="indexT"> {{find.paid_amount}} </pre> //didn't work
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import BuildingsService from "../../../services/ApiService"
export default {
name: 'light-table',
components: {
},
data() {
return {
buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
};
},
computed: {
roles() {
let roles = JSON.parse(sessionStorage.getItem('user')).role;
return roles;
},
},
mounted: function () {
BuildingsService.getAllFlats().then((response) => {
this.Flats = response.data.response;
});
BuildingsService.getBuildings().then((response) => {
this.Building = response.data.response;
console.log(this.Building, "buildings");
});
},
}
</script>
find.payment.cash_payment.paid_amount
find.payment.installment_payment.installments[0].paid_amount
find.payment.installment_payment.installments[1].paid_amount
You will need a method to detect the payment method and also sum the installments if it is an array.
Non tested example
getPaidAmount(flat) {
if (flat.payment.cash_payment){ return Number(payment.cash_payment.paid_amount) }
if (flat.payment.installment_payment){
const arr = flat.payment.installment_payment.installments.map(it=>Number(it.paid_amount))
const sum = arr.reduce(function (a, b) {return a + b;}, 0);
return sum
}
}
You can try like following snippet:
new Vue({
el: '#demo',
data() {
return {
response: [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "doki",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},
],
//buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
}
},
computed: {
roles() {
//let roles = JSON.parse(sessionStorage.getItem('user')).role;
//return roles;
},
cities() {
return this.response.map(r => r.city)
}
},
mounted: function () {
//BuildingsService.getAllFlats().then((response) => {
this.Flats = this.response;
//});
//BuildingsService.getBuildings().then((response) => {
this.Building = this.response;
//console.log(this.Building, "buildings");
//});
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" >
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option v-for="city in cities" >{{ city }}</option>
</select>
<div v-for="(flat,index) in Flats" :key="index" style="color:white;" v-show="City">
<div v-if="flat.payment.cash_payment && flat.city === City">
{{ flat.city }}
<pre style="color:white;" v-for="(find,indexT) in flat.payment" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
<div v-else v-if="flat.payment.installment_payment && flat.city === City">
{{ flat.city }}
<pre v-for="(find,indexT) in flat.payment.installment_payment?.installments" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
[
{
"id": 0,
"owner": {
"id": 0,
"email": "",
"username": "",
"profile": "",
"description": "",
"followers": 0,
"following": 0
},
"title": "",
"content": "",
"image_urls": [
"image_url1",
"image_url2",
"image_url3", ...
],
"liked_people": [
1,
2,
3, ...
],
"like_count": 0,
"comment_count": 0,
"view_count": 0,
"tag" : [
"tag1",
"tag2",
"tag3", ...
],
"created_at": "",
"comment_preview": [
{
"comment_id": 0,
"owner": {
"id": 0,
"email": "",
"username": "",
"profile": "",
"description": "",
"followers": 0,
"following": 0
},
"content": "",
"created_at": ""
}, ...
]
}, .....
]
This is api what feed and detail data.
I am developing SNS.
I get this data
and I want to create feed list what having 2 comments
but comments is may or may not be exist.
So how to append this comments to html?
Here is example code
Please add comments html is .feedComment.
const getFeed = (id) => {
$.ajax({
url: `BASE_URL/feed/postList`,
type: 'GET',
success: function(res) {
res.map(({id, owner, image_urls, title, content, tag, comment_preview}) => {
$('.feedArea').append(`
<div class='feed'>
<div class='feedHead'>
<div class='postmanProfile'>
<img src= "${owner.image}">
</div>
<div class='postmanName'>
<div class= 'postmanNameText'>${owner.username}</div>
</div>
</div>
<div class='disuniteLine'>
<hr>
</div>
<div class="feedThumbanil">
<div class="thumbanilImg">
<a href="detailFeed.html?id=${id}">
<img class="ImgArea" src="${image_urls}" alt="">
</a>
</div>
</div>
<div class="disuniteLine">
<hr>
</div>
<div class='feedLike_And_Comment'>
<div class='LikeIconImg like-${id}' feedId="${id}">
</div>
<div class="CommentIconImg">
<img class="commentImg" src="/picture/Icon/chat-box.png" alt="#">
</div>
<div class="viewMoreArea">
<img class="view_more" src="/picture/Icon/more.png">
</div>
</div>
<div class='title'>
<h2>
${title}
</h2>
</div>
<div class='content'>
<span>
${content}
</span>
</div>
<div class='tag'>
<h4>
${tag}
</h4>
</div>
<div class="feedComment">
// What should I do?
</div>
</div>
`);
})
},
error : function(err){
console.log(err);
},
async: false
})
}
I am time-limited life.
If I don't solve this, I might die.
Assuming your ajax works, you basically need this
<div class="feedComment">
${Object.keys(comment_preview[0].owner)
.map(key => (key+":"+comment_preview[0].owner[key]))
}
</div>
const res = [{ "id": 0, "owner": { "id": 0, "email": "", "username": "", "profile": "", "description": "", "followers": 0, "following": 0 }, "title": "", "content": "", "image_urls": [ "image_url1", "image_url2", "image_url3" ], "liked_people": [ 1, 2, 3 ], "like_count": 0, "comment_count": 0, "view_count": 0, "tag": [ "tag1", "tag2", "tag3" ], "created_at": "", "comment_preview": [{ "comment_id": 0, "owner": { "id": 0, "email": "bla#bla.com", "username": "User x ", "profile": "x profile", "description": "Desc", "followers": 0, "following": 0 }, "content": "Is this a feed comment?", "created_at": "" }] }]
function format(res) {
res.forEach(({
id,
owner,
image_urls,
title,
content,
tag,
comment_preview
}) => {
$('.feedArea').append(`
<div class='feed'>
<div class='feedHead'>
<div class='postmanProfile'>
<img src= "${owner.image}">
</div>
<div class='postmanName'>
<div class= 'postmanNameText'>${owner.username}</div>
</div
</div>
<div class='disuniteLine'>
<hr>
</div>
<div class="feedThumbanil">
<div class="thumbanilImg">
<a href="detailFeed.html?id=${id}">
<img class="ImgArea" src="${image_urls}" alt="">
</a>
</div>
</div>
<div class="disuniteLine">
<hr>
</div>
<div class='feedLike_And_Comment'>
<div class='LikeIconImg like-${id}' feedId="${id}">
</div>
<div class="CommentIconImg">
<img class="commentImg" src="/picture/Icon/chat-box.png" alt="#">
</div>
<div class="viewMoreArea">
<img class="view_more" src="/picture/Icon/more.png">
</div>
</div>
<div class='title'>
<h2>
${title}
</h2>
</div>
<div class='content'>
<span>
${content}
</span>
</div>
<div class='tag'>
<h4>
${tag}
</h4>
</div>
<div class="feedComment">
${Object.keys(comment_preview[0].owner)
.map(key => (key+":"+comment_preview[0].owner[key]))
}
</div>
`);
})
}
format(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feedArea"></div>
I'm using Bootstrap 4 on the front end, and a simple template literal to pass my strings. It's outputting the columns into their own individual rows, and I don't understand why.
const bodList = [
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
}
];
function bodTemplate(bod) {
return `
<div class="col-md-4 col-lg-3">
<div class="card border-0">
<img src="${bod.image}" class="card-img-top" alt="${bod.name}">
<div class="card-body pl-0">
<h5 class="card-title">${bod.name} <span class="text-right">${bod.termExp}</span></h5>
<h6 class="card-title">${bod.title}</h6>
<h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
</div>
</div>
</div>
`;
}
document.getElementById("boardDirectors").innerHTML = `
${bodList.map(bodTemplate).join(" ")}
`;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row no-gutters">
<div id="boardDirectors"></div>
</div>
</div>
It's a bootstrap / CSS issue, rather anything related to the fact you've used template literals.
It appears that by having an extra <div> in between the row div and the col divs, you've broken the link between those two (in bootstrap's mind at least), so it doesn't treat those columns as columns. I haven't checked the source but I'd guess it's related to how the CSS rules are defined, perhaps a strict hierarchy is required.
Anyway the simple solution is to remove that div and shift the id="boardDirectors attribute onto the row div.
I also removed the no-gutters class to stop the images bunching up next to each other - now it allows some space in between them.
const bodList = [
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
},
{
image: "https://placekitten.com/450/600",
name: "First Last",
profile: "https://www.google.com",
termExp: "2023",
title: "Chief Guy",
company: "The Company"
}
];
function bodTemplate(bod) {
return `
<div class="col-md-4 col-lg-3">
<div class="card border-0">
<img src="${bod.image}" class="card-img-top" alt="${bod.name}">
<div class="card-body pl-0">
<h5 class="card-title">${bod.name} <span class="text-right">${bod.termExp}</span></h5>
<h6 class="card-title">${bod.title}</h6>
<h6 class="card-title"><span class="text-muted font-weight-bold">${bod.company}</span></h6>
</div>
</div>
</div>
`;
}
document.getElementById("boardDirectors").innerHTML = `
${bodList.map(bodTemplate).join(" ")}
`;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid">
<div class="row" id="boardDirectors">
</div>
</div>
This is not relevant to template literals. It's CSS related.
Try adding your id on the div above:
<div id="boardDirectors" class="row no-gutters">
and remove the old one. This should solve your issue.
<div class="container-fluid">
<div id="boardDirectors" class="row no-gutters"></div>
</div>
I have a json file called default.json. In search project name or project id in search field. Selected result form search box should show project details and get selected side bar project name.
here is the result showed in json:
"projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
Search box html code:
<nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0"
style="background-color:#3B78E7">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">GCP Projects</a>
<input class="form-control form-control-dark w-100" type="text"
placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
Here is the screenshot which i needed:
here is the screenshot 2
You can use Lodash. It is easy to use and very helpful library.
I have been studying some of the videos for angularjs. While trying to apply filter to a list of bookmark category my main content simply doesn't loads. I have not implemented view as of now. And I would like my code to be without views for a moment.
The filter line is problematic as when I remove the curly braces around. The bookmark lists does shows up but the filtering still not works !
Please let me know what is the correction which needs to be done ?
Here is my 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">
<img class="logo" src="assets/img/eggly-logo.png">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</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>
{{bookmark.title}}
</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;
});
A few errors there must me fixed in your code.
Please attach .setCurrentCategory() to $scope (or this) in controller as Angular realize MVVM architecture. $scope is an object that links your controllers with views. As long as you want to interact with data from controller by method setCurrentCategory you must assign it to $scope
Filters - according to AngularJS documentation need expression – not curly brackets
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.setCurrentCategory = setCurrentCategory;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Eggly'>
<div ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</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:currentCategory.name">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
</div>
</div>