We Keep Coding

How to list parent child categories if parent child div is not inside one another?

I want to list categories and sub categories but problem is parent categories div is different and child div is different that is child div is not inside parent div so i am not getting how to list parent - child categories.
This is my code:
<!-- Parent Div Section -->
<div ng-repeat="item in MyData">
<table >
<tr>
<td >{{ item.parentCategoryName }}</td>
</tr>
</table>
</div>
<!-- Child Categories Div Section -->
<div>
<table >
<tr>
<td >{{ item.ChildCategoryName }}</td>
</tr>
</table>
</div>
Json Structure:
[
{
"parentCategoryName": "Electronics",
"SubCategories": [
{
"ChildCategoryName": "Mobile",
},
{
"ChildCategoryName": "TV",
},
{
"ChildCategoryName": "Ac",
}
]
},
{
"parentCategoryName": "Sports",
"SubCategories": [
{
"ChildCategoryName": "Shoes",
},
{
"ChildCategoryName": "Bike",
},
{
"ChildCategoryName": "Bags",
}
]
}
]
Expected output:
Note:Although it seems like both parent child div are same but there are lots of codes which i havent shown for better understanding that is why both div are in different section.So i cant change that because above design will render same output as shown in expected output.

You can use ng-repeat-start and ng-repeat-end. See the code below
<table>
<tr ng-repeat-start="item in MyData">
<td>{{item.parentCategoryName}}</td>
</tr>
<tr ng-repeat-end>
<td> </td>
<td colspan="2">
<table>
<tr ng-repeat="subCategory in item.SubCategories">
<td>{{subCategory.ChildCategoryName}}</td>
</tr>
</table>
</td>
</tr>
</table>
Rest you can alter according you. Hope it helps.

How do I filter and structure this JSON?

I have a array of json objects known as events, which has fields like eventId, eventName and most importantly dateofevent.
[{event1}, {event2}, {event3}];
I need to iterate over this array of events and filter out the events that are on the same day. To obtain a new object like this.
"days": [
{
"date": "11-05-2015",
"events": [
{"eventId": 1, ...},
{"eventId": 2, ...},
{"eventId": 3, ...},
{"eventId": 4, ...},
]
},
How can I do this efficiently with Javascript or Angular?

You can create a new object with the dates as keys, and the values are arrays that contain the events.
After you have the date => events map, convert it to array in the structure you want.
Assuming the original data is in a variable called "events":
var events = [{event 1}, {event 2}...];
var daysMap = {};
var days = [];
events.map(function(event) {
if (days[event.dateofevent] === undefined) {
days[event.dateofevent] = [];
}
days[event.dateofevent].push(event);
});
for (var day in daysMap) {
days.push({
date: day,
events: daysMap[day]
});
}

HTML
<div ng-app>
<span class="bold">Demonstrating filtering and sorting using Angular JS</span>
<br /><br />
<div ng-controller="ShoppingCartCtrl">
<div>Sort by:
<select ng-model="sortExpression">
<option value="Name">Name</option>
<option value="Price">Price</option>
<option value="Quantity">Quantity</option>
</select>
</div>
<br />
<div><strong>Filter Results</strong></div>
<table>
<tr>
<td>By Any: </td>
<td><input type="text" ng-model="search.$" /></td>
</tr>
<tr>
<td>By Name: </td>
<td><input type="text" ng-model="search.Name" /></td>
</tr>
<tr>
<td>By Price: </td>
<td><input type="text" ng-model="search.Price" /></td>
</tr>
<tr>
<td>By Quantity: </td>
<td><input type="text" ng-model="search.Quantity" /></td>
</tr>
</table>
<br />
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">
<td>{{item.Name}}</td>
<td>{{item.Price | currency}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<br />
</div>
</div>
Javascript
function ShoppingCartCtrl($scope) {
$scope.items = [
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Shaving cream", Price: "50", Quantity: "15"},
{Name: "Shampoo", Price: "100", Quantity: "5"}
];
$scope.mySortFunction = function(item) {
if(isNaN(item[$scope.sortExpression]))
return item[$scope.sortExpression];
return parseInt(item[$scope.sortExpression]);
}
}
CSS
.bold { font-weight:bold; }
table td{
padding: 10px;
}
table th{
font-weight: bold;
text-align: center;
}
demo_click here

How can I use ng-repeat and filter to get JSON data

For the JSON below, if I want to get value of name for every object, how should I do it? {{x}} shows both value of name and type, but {{x.name}} or {{x.type}} doesn't work.
Also, If I use {{x}} to display name and type, how do I set a filter which can search value of name, but show the whole line, for example, I type A, then shows 'A file'.
JSON:
$scope.test = [{"name":"A","type":"file"},{"name":"B","type":"folder"},{"name":"C","type":"folder"}]
Html:
<input type="text" ng-model="searchtext">
<table>
<tr>
<th>NAME</th>
<th>TYPE</th>
</tr>
<tr ng-repeat="t in test">
<td ng-repeat="x in t | filter: searchtext">
{{x}}
</td>
</tr>
</table>

I dont know what searchtext is like, but I think this may give an idea:
<tr ng-repeat="x in test|filter:searchtext">
<td>
<span ng-bind="x.name"></span>
<span ng-bind="x.type"></span>
</td>
</tr>

You may also try this code. However, I have added a div element instead of a table.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="t">
<p><input type="text" ng-model="searchtext" /></p>
<div ng-repeat="x in data | filter:searchtext">
<div> {{ x.name + ' ' + x.type }} </div>
</div>
</div>
</body>
<script>
var myApp = angular.module('app', []);
myApp.controller('t', function ($scope) {
$scope.data = [{ "name": "A", "type": "file" }, { "name": "B", "type": "folder" }, { "name": "C", "type": "folder"}];
});
</script>
</html>

<tr ng-repeat="t in test">
<td ng-repeat="(key,value) in t | filter: searchtext">
{{value}}
</td>
</tr>

AngularJS: How to represent and save an object per row in a table form

I need to have a table form of departments in which there are limited number of departments, date of which is available. Out of all those departments some of departments need to be assigned to students and once that is done the form needs to be submitted. On submission, each row in the table needs to be added in a collection of assignedDepartments collection.
Following is how I need the assignedDepartments collection to look if two departments have been assigned:
var assignedDepartments= [
{ "name": "Rohit", "age": 24, "department": "Computer Science", "isAssigned": true},
{ "name": "Matt", "age": 23, "department": "Engineering Physics", "isAssigned": true},
{ "name": "Rubi", "age": 32, "department": "Humanity", "isAssigned": false}
]
The departments collection is available that I am using to iterate through using ng-repeat:
<form name="assignedDepartmentsForm">
<table class="table table-hover">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Department
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="department in departments">
<td>
<input type="text" ng-model="name" />
</td>
<td>
<input type="number" ng-model="age" />
</td>
<td>
{{ department}}
</td>
<td>
<input type="checkbox" ng-model="isAssigned" />
</td>
</tr>
</tbody>
</table>
<form>
Could somebody help me create a table form for departments in which each row is represented and saved as an object on form submission.

Covert you array of string to an array of objects instead(like below). Then it will get easier for you to add more fields to the objects.
[
{"department":'Computer Science'},
{"department":'Engineering Physics'},
{"department":'Humanity'}
]
You can now still use you html-code. You just have to tweak your controller.
function formCtrl($scope) {
$scope.departments = angular.copy(data2);
$scope.submit = function() {
$scope.assignedDepartments = [];
angular.forEach($scope.departments, function(d) {
if (d.isAssigned) {
$scope.assignedDepartments.push(d);
}
})
}
$scope.assignedDepartments = [];
}
Here's an code example for it: http://jsbin.com/pegonisale/1/edit?html,js,output

How to hide <td>s in angularjs in particular rows when using ng-repeat

I have a table and and many <td>s in first <tr> </tr> i am using ng-repeat
<tr ng-repeat="receipt in $data">
<td data-title="voucher number">
<span>{{receipt.voucher_no}}</span>
</td>
<td data-title="voucher date" sortable="'voucher_date'" filter="{'voucher_date': 'text' }">
<span>{{receipt.voucher_date}}</span>
</td>
<td data-title="voucher Amount">
<span>{{receipt.voucher_amount}}</span>
</td>
</tr>
i have also json data like
{
"data": [
{
"voucher_no": "2",
"voucher_amount": "100",
"voucher_date": "2014-05-04",
},
{
"voucher_no": "3",
"voucher_amount": "1000000",
"voucher_date": "2014-02-05",
},
{
"voucher_no": "4",
"voucher_amount": "50000",
"voucher_date": "2014-02-05",
},
.
.
.
.
{
"total": 1360100
}
]
}
please note that for final data there is only one field 'total'.
so for all the row i want to print 3 <td>s except the in final row.

<tr ng-repeat="receipt in $data | filter:{voucher_date: '2014-05-04'}">
<!-- Voucher No -->
<td ng-if="!$last"
data-title="voucher number">
<span>{{receipt.voucher_no}}</span>
</td>
<!-- Voucher Date -->
<td ng-if="!$last"
data-title="voucher date">
<span>{{receipt.voucher_date}}</span>
</td>
<!-- Voucher Amount -->
<td ng-if="!$last"
data-title="voucher Amount">
<span>{{receipt.voucher_amount}}</span>
</td>
<!-- Total Column -->
<td ng-if="$last"
colspan="3"
data-title="Total">
<span>{{receipt.total}}</span>
</td>
</tr>
The above filter will only show the records for which the date is equal to the specified date.
If you want to show all the records between two dates you will need to specify a function as the filter: | filter:filter_between_date and in your controller you have to create that function:
$scope.from_date = '2014-05-04'; // 04 May
$scope.to_date = '2014-05-10'; // 10 May
$scope.filter_between_date = function(item) {
var item_date = new Date(item.voucher_date).getTime();
if(item_date >= (new Date($scope.from_date).getTime()) &&
item_date <= (new Date($scope.to_date).getTime()) {
return true;
}
return false;
};
Angular filter docs
Angular ngIf directive docs
Angular ngRepeat $last property

Use :
<tr ng-repeat="receipt in $data">
<td data-title="voucher number" ng-hide="$index == $data.length - 1">
<span>{{receipt.voucher_no}}</span>
</td>
<td data-title="voucher date" ng-hide="$index == $data.length - 1">
<span>{{receipt.voucher_date}}</span>
</td>
<td data-title="voucher Amount">
<span>{{receipt.voucher_amount}}</span>
</td>
</tr>
The $index variable stores the position of the repeated element in the original list.