We Keep Coding

How to make the radio button dynamic in angular

here's the code:
list.component.html
<div class="sample" style="
margin: 0;
padding: 0;
overflow-y: scroll;
max-height: 100%;
">
<nz-form-item *ngFor="let remark of tasks">
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="14">
{{ remark.description }}
</div>
<div nz-col nzSpan="10">
<nz-form-control>
<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue"
(ngModelChange)="onChangeStatus($event)">
<label nz-radio nzValue="passed">Passed</label>
<label nz-radio nzValue="failed">Failed</label>
</nz-radio-group>
</nz-form-control>
</div>
</div>
<div nz-row *ngIf="radioValue === 'failed'">
<div nz-col nzSpan="24">
<nz-form-control>
<textarea nz-input placeholder="Remarks" class="remarks-textarea" type="text" name="otherRemark"
formControlName="otherRemark" [(ngModel)]="otherRemark"
[nzAutosize]="{ minRows: 1, maxRows: 2 }"></textarea>
</nz-form-control>
</div>
</div>
</nz-form-item>
</div>
list.component.ts
tasks = [
{
"id": "ESOSA6aCrOER",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:24:07",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:24:07",
"name": "Sample1",
"description": "Desc1",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "1og6aSsrlG3nT",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:31:18",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:31:18",
"name": "Sample2",
"description": "DESC2",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "tbwndVAkYtql",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:33:11",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:33:11",
"name": "SAMPLE4",
"description": "DESC4",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "1cyNFwhR4cI9n",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:56:12",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:56:12",
"name": "SAMPLE5",
"description": "DESC5",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "1qJWWRwz2Q2fD",
"createdBy": "admin",
"timeCreated": "2019-11-28 15:51:02",
"updatedBy": "admin",
"timeUpdated": "2019-11-28 15:51:02",
"name": "Task 0001",
"description": "Task 0001 Description",
"status": "ACTIVE",
"type": "PM"
},
]
What I want is when selecting radio button. it should not affect the other radio button.
the problem is when I select the first item/radio button.
also the textarea, when I click the failed all textarea from the item will display, it shouldn't display affect the other.
thanks in advance

I think you forgot to group the radio buttons in different groups for each remark of task.
I can see you have created radio buttons with group name radiostatus but for all your remarks group name remains same which shouldn't be the case.
What you can do is add index to the for loop and then dynamically give different
names to different group according to remarks.
<nz-form-item *ngFor="let remark of tasks; let i = index">
now while giving name to group name instead of giving hard coded value produce different name by using index.
[formControlName]="'radiostatus'+ i"

how can I get child elements in angularjs

I'm making a multi-select "drop-down" and I want to disable the category and style it differently in my "drop-down". so I got the select element and I want to make those children that are category disable. how can I get the children to do this.
so far I've done this:
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}];
$scope.catCountainr = [];
$scope.categorizedData = [];
$scope.indexContainer = [];
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
$scope.catCountainr.push($scope.datas[i].category);
}
}
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push($scope.catCountainr[i]);
$scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData.push($scope.datas[j].item);
}
}
}
var select = angular.element(document.getElementById("select"));
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form action="" class="">
<div id="widgetContainer">
<!--<input type="text" ng-click="openSelect()" class="input-control">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
<h4>{{data.category}}</h4>
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>-->
<ul id="select">
<li ng-repeat="key in categorizedData">{{ key }}</li>
</ul>
</div>
</form>
</div>
</body>
</html>
When I use select.children() it's not working
Is there any other way to get those children?
thank you in advance

Do it like this
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push({
item: $scope.catCountainr[i],
isDisabled: true
});
$scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData.push({
item: $scope.datas[j].item,
isDisabled: false
});
}
}
}
<ul id="select">
<li ng-repeat="data in categorizedData" ng-class="{'diffColor': data.isDisabled}">{{ data.item }}</li>
</ul>
.diffColor {
background-color: wheat;
pointer-events: none;
user-select: none;
}
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}];
$scope.catCountainr = [];
$scope.categorizedData = [];
$scope.indexContainer = [];
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
$scope.catCountainr.push($scope.datas[i].category);
}
}
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push({
item: $scope.catCountainr[i],
isDisabled: true
});
$scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData.push({
item: $scope.datas[j].item,
isDisabled: false
});
}
}
}
});
.diffColor {
background-color: wheat;
pointer-events: none;
user-select: none;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form action="" class="">
<div id="widgetContainer">
<!--<input type="text" ng-click="openSelect()" class="input-control">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
<h4>{{data.category}}</h4>
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>-->
<ul id="select">
<li ng-repeat="data in categorizedData" ng-class="{'diffColor': data.isDisabled}">{{ data.item }}</li>
</ul>
</div>
</form>
</div>
</body>
</html>
2nd Answer
A slightly different approach then your js, but it seemed better to me so I have added. Please look into updated JS and HTML code as well.
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}];
$scope.catCountainr = [];
$scope.categorizedData = [];
$scope.indexContainer = [];
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
$scope.catCountainr.push($scope.datas[i].category);
}
}
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push({
item: $scope.catCountainr[i],
isDisabled: true,
items: []
});
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData[i].items.push({
item: $scope.datas[j].item
});
}
}
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form action="" class="">
<div id="widgetContainer">
<!--<input type="text" ng-click="openSelect()" class="input-control">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
<h4>{{data.category}}</h4>
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>-->
<ul id="select">
<li ng-repeat="data in categorizedData" class="isDisabled">{{data.item }}
<ul ng-if="data.items && data.items.length > 0">
<li ng-repeat="itemVar in data.items" class="isDisabled">{{itemVar.item }}</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
</body>
</html>

how to insert json data dynamically into html elements

{
"top10": [
{
"state": "red",
"claimed": true,
"branch": "release-2.3.4",
"job": "sdk",
"culprit": "Hansi Meier"
},
{
"state": "blue",
"claimed": true,
"branch": "master",
"job": "ibeo-cloud",
"culprit": "Karl Gustavo"
},
{
"state": "yellow",
"claimed": false,
"branch": "feature-abc",
"job": "appbase",
"culprit": "MAfred Auch"
}
]
}
<nav class="side-navbar">
<div class="title">
<h1>Top 10</h1>
</div>
<ul class="list-group">
<a class="item d-flex align-items-center">
<i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
<div class="item d-table-cell">
<i id='topbranch'></i>
<i id='topjob'></i>
<i id='topculprit'></i>
</div>
<i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
</a>
</ul>
</nav>
I want to insert my json data into html elemnts
for example top10[0].branch should go into html id topbranch.
and it should loop. please see the image how it should come.
please show me how to do it in javascript.it would be nice if you give jsfiddle link

You need to change all id to class for topbranch, topjob and topculprit as you will be creating multiple elements through loop. The id should be unique for any element in HTML document.
Hope the below sample works for you. You can find comments in JS code. You need to write your own CSS to display the items as per your screen shot. I have added li element under ul element.
var data = {
"top10": [
{
"state": "red",
"claimed": true,
"branch": "release-2.3.4",
"job": "sdk",
"culprit": "Hansi Meier"
},
{
"state": "blue",
"claimed": true,
"branch": "master",
"job": "ibeo-cloud",
"culprit": "Karl Gustavo"
},
{
"state": "yellow",
"claimed": false,
"branch": "feature-abc",
"job": "appbase",
"culprit": "MAfred Auch"
}
]
};
$.each(data.top10, function (i, el) {
var ele = $(".list-group a.item:first").parent().clone(); //Clone the first element
ele.find(".topbranch").text(el.branch).css("color", el.state); //Update values
ele.find(".topjob").text(el.job);
ele.find(".topculprit").text(el.culprit);
$(".list-group").append(ele); //Append cloned element to `list-group`
})
$(".list-group a.item:first").parent().remove(); //Remove first li
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="side-navbar">
<div class="title">
<h1>Top 10</h1>
</div>
<ul class="list-group" style="list-style-type: none;">
<li>
<a class="item d-flex align-items-center" style="display: flex; justify-content: space-evenly;">
<i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
<div class="item d-table-cell">
<i class='topbranch'></i><br/>
<i class='topjob'></i><br/>
<i class='topculprit'></i><br/>
</div>
<i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
</a>
</li>
</ul>
</nav>

If you have json array you need to just loop through all objects and read their properties.
Please try this.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"top10": [
{
"state": "red",
"claimed": true,
"branch": "release-2.3.4",
"job": "sdk",
"culprit": "Hansi Meier"
},
{
"state": "blue",
"claimed": true,
"branch": "master",
"job": "ibeo-cloud",
"culprit": "Karl Gustavo"
},
{
"state": "yellow",
"claimed": false,
"branch": "feature-abc",
"job": "appbase",
"culprit": "MAfred Auch"
}
]
}
for (i in myObj.top10) {
x += "<h2>" + myObj.top10[i].branch + "</h2>";
x += "<h2>" + myObj.top10[i].job + "</h2>";
x += "<h2>" + myObj.top10[i].culprit + "</h2>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Try using a modern javascript framework with data binding feature, it's easy to implement and elegant, you can choose from vue, Angular or React.

You can try some thing like this iterate over your data.
var html;
$.each(data.top10,function(key1,value1){
html="<div><i id='topbranch'>"+value1.state+"</i><br>"
+"<i id='topjob'>"+value1.job+"</i><br>"
+" <i id='topculprit'>"+value1.culprit+"</i></div><br>"
$("#divId").append(html)
})
here is the fiddle : https://jsfiddle.net/6w11Ln05/3/
you can add your design accordingly.

Rivets.js IF object exist

I have a shopping cart from shopify. The object looks like this:
{
"attrs": {
"line_items": [
{
"image": {
"id": 19361216518,
"created_at": "2016-10-03T11:50:25-05:00",
"position": 1,
"updated_at": "2017-02-03T17:11:13-06:00",
"product_id": 8659646086,
"src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box.jpg?v=1486163473",
"variant_ids": [
]
},
"image_variants": [
{
"name": "pico",
"dimension": "16x16",
"src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box_pico.jpg?v=1486163473"
}
],
"variant_id": 30287712070,
"product_id": 8659646086,
"title": "Dome Water Main Shut Off Valve",
"quantity": 1,
"properties": {
},
"variant_title": "Default Title",
"price": "99.99",
"compare_at_price": null,
"grams": 0,
"shopify-buy-uuid": "shopify-buy.1494514993286.2"
}
],
"shopify-buy-uuid": "shopify-buy.1494514993286.1"
}
And a function that looks like this:
var updateCart = function() {
var cart = localStorage.getItem(domeCart).toJSON();
if (cart.lineItemCount != 0) {
var shoppingCart = document.getElementById('shopping-cart');
rivets.bind(shoppingCart,{cart:cart});
}
}
And a cart that looks like this:
<div id="shopping-cart">
<h3 class="empty-cart">Empty!</h3>
<div class="top-cart-items items">
<div class="top-cart-item clearfix">
<div class="top-cart-item-image">
<img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" />
</div>
<div class="top-cart-item-desc">
Light Blue Denim Dress
<span class="top-cart-item-price">$24.99</span>
<span class="top-cart-item-quantity">x 3</span>
</div>
</div>
</div>
<div class="top-cart-action clearfix">
<span class="fleft top-checkout-price">$114.95</span>
View Cart
</div>
</div>
I'm having trouble figuring out how I can use rivets to check if the object is empty or not and if it is empty put <h2>Shopping cart empty</h2> but if it isn't empty loop through all of the cart items and place the data in its respectable part of the markup.
I've looked through Rivets.js documentation and it the product doesn't seem well documented. Any help would be very much appreciated.

Filters not working - Angularjs

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>