I'm using two ng-repeats to display all the details in one table. The two lists are noway related to each other. I want to display first list(customers and their Ids) in left side and second list(sales and it's Ids) in right side of the table.
The output should be like this.
Customers Id Sales Id
----------------------------------
cust 1.1 1 site 2.1 4
cust 1.2 2 site 2.2 5
cust 1.3 3
cust 1.4 7
Plunker
Here you can find the solution for your question
Solved Plunker
$scope.resList = $scope.customers.map(function(value, index) {
return {
cust: value,
sal: $scope.sales[index]
}
});
Use table Following way
<table>
<tbody >
<tr >
<td valign='top'>
<table>
<tr><th>Customers</th> <th>Id</th> </tr>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td><td>{{ customer.id}}</td>
</tr>
</table>
</td>
<td valign='top'>
<table>
<tr><th>Sites</th> <th>Id</th></tr>
<tr ng-repeat="site in sales" >
<td>{{site.name}}</td><td>{{ site.id}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Try this code it may help you
<tbody>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td><td>{{ customer.id}}</td>
<td>{{sales[$index].name}}</td><td>{{sales[$index].id}}</td>
</tr>
</tbody>
angular.module('myApp', []).controller('MainController', function($scope){
$scope.haha = "wow";
$scope.customers = [
{name: 'cust 1.1',id:"1"},
{name: 'cust 1.2',id:"2"},
{name: 'cust 1.3',id:"3"},
{name: 'cust 1.4',id:"7"}
];
$scope.sales = [
{name: 'Site 2.1',id:"4"},
{name: 'Site 2.2',id:"5"}
];
});
/*
output something like this.(customers)
Customers Id Sales Id
----------------------------------
cust 1.1 1 site 2.1 4
cust 1.2 2 site 2.2 5
cust 1.3 3
cust 1.4 7
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MainController">
<table>
<th>Customers</th>
<th>Id</th>
<th>Sites</th>
<th>Id</th>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td>
<td>{{ customer.id}}</td>
<td>{{sales[$index].name}}</td>
<td>{{sales[$index].id}}</td>
</tr>
</tbody>
</table>
</body>
Using map function, you can combine the two arrays into single one like below
$scope.resultArray = $scope.customers.map(function(value, index) {
return {
data1: value,
data2: $scope.sales[index]
}
});
and you can loop it using ng-repeat.
Here is the Working fiddle
Hope this helps :)
Related
http://jsfiddle.net/ADukg/13415/
I have an object called 'orders' that contains a list of foods, filterable by type with the select box below. The select box contains the filter for the food category of the orders. I want to be able to filter out a table using angular using this select box.
$scope.orders = {
"order1": {food_name: "apple", type: 1},
"order2": {food_name: "banana", type: 1},
"order3": {food_name: "carrot", type: 2},
"order4": {food_name: "cereal", type: 3},
"order5": {food_name: "wheat", type: 3}
}
$scope.foodCategories = [{id:0,name:"All"}, {id:1,name:"Fruit"},{id:2,name:"Vegatable"}, {id:3,name:"Grains"}];
HTML:
<div ng-app = "myApp" ng-controller="foodCntrl">
Select Food Type:
<select
class="form-control" ng-model="foodCategories" ng-options="type as type.name for type in foodCategories">
</select>
<table class="table">
<thead>
<tr>
<th>Food Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="f in orders | filter:foodCategories.id">
<td>{{f.food_name}}</td>
</tr>
</tbody>
</table>
</div>
I am getting the angular console error:
Error: filter:notarray
Not an array when using filter:foodCategories on the table ng-repeat.
How can I fix this?
Just add a filter for the property "type" in your orders array, and for the "foodCategories" make the id for the "All" category empty string as so {id:"",name:"All"}.
<table class="table">
<thead>
<tr>
<th>Food Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="f in orders | filter:{type: doorTypeSelect.id}">
<td>{{f.food_name}}</td>
</tr>
Here is a working plunkr: http://plnkr.co/edit/4V0i1AIGRovnOUSp7eom?p=preview
So far I've only found examples that put the objects in the rows (1)(2)(3), but I need to put the objects in the columns and their attributes in the rows.
Example of JSON:
[
{
name: 'peanut butter',
price: 0.99
}
{
name: 'strawberry jelly',
price: 0.99
}
{
name: 'white bread',
price: 2.99
}
]
Example of desired table:
I think you want something like this.
Angular template:
<table>
<tr>
<th>Name</th>
<th ng-repeat="item in yourList">{{ item.name }}</th>
</tr>
<tr>
<td>Price</td>
<td ng-repeat="item in yourList">{{ item.price }}</td>
</tr>
</table>
I got a json of table which has columns and rows as below
$scope.table = {
Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
, {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
, {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
, Rows:[{Items:[{Value:1},{Value:5},{Value:8},{Value:""}]}
,{Items:[{Value:2},{Value:6},{Value:9},{Value:""}]}
,{Items:[{Value:3},{Value:7},{Value:10},{Value:15}]}]
} //end of table
I want to display Columns.SubHeaders as Sub header row of a table.
Here what I tried, but did not work
<table class="table table-stripped table-bordered">
<thead>
<tr>
<th ng-repeat="col in table.Columns" colspan="{{col.SubHeaders.length}}">{{col.Header}}</th>
</tr>
<tr>
<td class="center text-black" ng-repeat="head in table.Columns[0].SubHeaders">{{head}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.Rows">
<td ng-repeat="item in row.Items">
{{item.Value}}
</td>
</tr>
</tbody>
</table>
I used head in table.Columns[0].SubHeaders just to show it is working for hard-coded index value.
How can I achieve this using single ng-repeat? I can use two ng-repeats but it will lead to unnecessary html markup.
Here is the complete fiddle
I created this fiddler (forked from yours):
https://jsfiddle.net/b50hvzef/1/
The idea is to join the subheaders as they are they actual columns:
<td class="center text-black" ng-repeat="head in subHeaders">{{head}}</td>
and the code looks like this:
var app = angular.module("app",[]);
app.controller("MyController", function ($scope, $http) {
$scope.table = {
Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
, {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
, {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
,Rows:[{Items:[{Value:1},{Value:5},{Value:8}]}
,{Items:[{Value:2},{Value:6},{Value:9}]}
,{Items:[{Value:3},{Value:7},{Value:10}]}]
};
var subHeaders = [];
$scope.table.Columns.forEach(function(col) {
col.SubHeaders.forEach(function(subHeader) {
subHeaders.push(subHeader);
});
});
$scope.subHeaders = subHeaders;
});
Note that there is still a mismatch between columns and data. But it's up to you how to solve it.
Hope this helps.
I am new to angularjs and I am trying to write a directive with nested elements.
<mydir-table>
<mydir-columns>
<mydir-column>
<title>Employee Name</title>
<data-field-name>ename</data-field-name>
<mydir-table>
<mydir-columns>
<mydir-column>
I have a JSON something similar to this:
{
rows: [
{
name: "Emp1"
},
{
name: "Emp2"
}
]
}
and expected output is:
<table>
<th>
Employee Name
</th>
<tr>
<td>
Emp 1
</td>
</tr>
<tr>
<td>
Emp 2
</td>
</tr>
</table>
Can anyone please provide some thoughts on how this can be implemented?
I'm having some difficulties generating the desired table structure with a nest ng-repeat. I have a table header for each day of the week and I want to display three shifts in the <td> beneath that. Currently I solve this with three <span>'s in one <td>, but I would like to generate three <td>'s for each shift in on day. My html code with the repeats is:
<div>
<table>
<caption>Week: {{ week }}</caption>
<thead>
<tr>
<th ng-repeat="day in days">
<span>{{day.Date}}/{{ month }}/{{ year }}</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="day in days">
<span ng-repeat="shift in shifts">{{shift.Name}}</span>
</td>
</tr>
</tbody>
</table>
</div>
I have tried <th colspan="3"> with different placement of "day in days" repeats, but I can't seem to get the wanted structure for the table body:
<tr>
<td>shift1</td>
<td>shift2</td>
<td>shift3</td>
<td>shift1</td>
<td>shift2</td>
<td>shift3</td>
<td>shift1</td>
<td>shift2</td>
<td>shift3</td>
<td>shift1</td>
<td>shift2</td>
<td>shift3</td>
<td>shift1</td>
<td>shift2</td>
<td>shift3</td>
<td>shift1</td>
<td>shift2</td>
<td>shift3</td>
</tr>
My question is: how can I rewrite my current code with the <span>'s so that it generates the wanted structure above.
If I understood your problem correctly then I think you are looking for ng-repeat-start & ng-repeat-stop.
HTML:
<div ng-app>
<div ng-controller="ExampleCtrl">
<table border="1">
<tr>
<td ng-repeat-start="day in days" ng-show="false"></td>
<td ng-repeat="shift in day.shifts" ng-repeat-end>shift{{shift}}</td>
</tr>
</table>
</div>
</div>
JS Controller:
function ExampleCtrl($scope) {
$scope.days = [
{
shifts: ["1","2","3"]
},
{
shifts: ["1","2","3"]
},
{
shifts: ["1","2","3"]
},
{
shifts: ["1","2","3"]
},
{
shifts: ["1","2","3"]
}
];
}
and the Fiddle
shifts outside days object: Fiddle update
You can create new plain list in your model to iterate over and use it instead of using nested loops. If data is to be changed then you can watch changes of dependent properties and reassemble plain list for each change. Something like this:
JavaScript
angular.module('app',[]).
controller('appController', function($scope) {
var i, j;
$scope.week = 1;
$scope.days = [{
day: 1,
month: 2,
year: 2014
}, {
day: 2,
month: 2,
year: 2014
}, {
day: 3,
month: 2,
year: 2014
}];
$scope.shifts = ['Shift1', 'Shift2', 'Shift3'];
// Create new plain list each time shifts is changed
$scope.$watchCollection('shifts', function() {
$scope.daysShifts = [];
for(i=0; i<$scope.days.length; i++) {
for(j=0; j<$scope.shifts.length; j++) {
$scope.daysShifts.push({
name: $scope.shifts[j]
});
}
}
});
$scope.addShift = function() {
$scope.shifts.push('Shift'+($scope.shifts.length+1));
}
});
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<div>
<table>
<caption>Week: {{week}}</caption>
<thead>
<tr>
<th ng-repeat="day in days" colspan="{{shifts.length}}">
<span>{{day.day}}/{{day.month}}/{{day.year}}</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="dayShift in daysShifts">
<span>{{dayShift.name}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<button ng-click="addShift()">Add Shift</button>
</body>
</html>
Plunker: http://plnkr.co/edit/zZYrurhp3HQA9Jp9QHDo?p=preview