I am new to Angular JS and I am binding following JSON to my HTML:
{
"CompanyName": "Company Ltd.",
"Products": [
{
"ProductId": 1245,
"Name": "Trial",
"ProductItems": [
{
"ProductId": 1254,
"ProductItemName": "Service 1",
"ProductItemType": "Service"
},
{
"ProductId": 7789,
"ProductItemName": "Service 2",
"ProductItemType": "Service"
}
]
}
]
}
My HTML is a table basically like following:
<table ng-controller="ProductController as productCtrl">
<thead>
<tr>
<th id="CompanyName">
<h1 class="h1">{{productCtrl.data.CompanyName}}</h1>
</th>
<th ng-repeat="product in productCtrl.data.Products">
<h2>{{product.Name}}</h2>
<h3>
<span>{{product.ProductPrice}}</span>
<span> {{product.CurrencySymbol}} / {{product.PriceTimePeriod}} </span>
</h3>
</th>
</tr>
</thead>
<tbody>
<!-- Need `product` here so that I can loop on their ProductItems -->
<tr ng-repeat="item in product.ProductItems">
<td>{{item.ProductItemName}}</td>
<td>{{item.Amount}}</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
Foreach Product in Products I am generating a column in thead and for each of Item in ProductItems of each Product I want to generate a row in tbody but since loop over all products is limited to thead I cannot bind ProductItems properly.
Any suggestion as how to overcome this?
Can you check this
<tr ng-repeat="item in productCtrl.data.Products.ProductItems">
<td>{{item.ProductItemName}}</td>
<td>{{item.Amount}}</td>
</tr>
When replaced to div it will be like this. Anyway you will have to style it to give a table structure
<div ng-controller="ProductController as productCtrl">
<div id="CompanyName">
<h1 class="h1">{{productCtrl.data.CompanyName}}</h1>
</div>
<div ng-repeat="product in productCtrl.data.Products">
<h2>{{product.Name}}</h2>
<h3>
<span>{{product.ProductPrice}}</span>
<span> {{product.CurrencySymbol}} / {{product.PriceTimePeriod}} </span>
</h3>
</div>
<!-- Need `product` here so that I can loop on their ProductItems -->
<div ng-repeat="item in product.ProductItems">
<span>{{item.ProductItemName}}</span>
<span>{{item.Amount}}</span>
</div>
</div>
Ideally the maximum product items count any product can have in the json has to be known before rendering the tbody rows, as a row will be created for each productitem of a product.
Check out this plunker sample: http://plnkr.co/edit/Pl6t69ShUje0WLQDWEdU?p=preview
The sample logic for rendering given below.
<table ng-controller="tblCntrl" class="table">
<thead>
<tr>
<th colspan="2" ng-repeat="product in json.Products">{{product.Name}}</th>
</tr>
<tr>
<th ng-repeat-start="product in json.Products">Item name</th>
<th ng-repeat-end>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat-start="product in json.Products">{{product.ProductItems[$parent.$index].ProductItemName}}</td>
<td ng-repeat-end>{{product.ProductItems[$parent.$index].amount}}</td>
</tr>
</tbody>
</table>
Related
I'm new in angular 2+. I have created a table in angular web api. I need to do it like this - when I press the button (icon) expand the table with the data from my web api.
I did it that way but it's not working. Could someone help me with a solution?
app.component.html
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" [dtOptions]="dtOptions" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr *ngIf="empty">
<td colspan="8" class="text-center" translate>shared.table.not-found</td>
</tr>
<tr *ngFor="let product of products; index as i" (click)="onSelectLine(i)"
[ngClass]="{'tr-selected': selectedIndex === i}">
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12" >
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</div>
</td>
</tr>
</thead>
</tbody>
</table>
</div>
</div>
app.component.ts
isShown = false;
onProductComponent(product: Product) {
this.isShown = ! this.isShown;
this._product = product;
this.productComponentService.getProduct(this._product.id)
.subscribe(element => {
});
}
It would be like this
You can add isShown property to every product. And change only that value.
If you want to have multiple rows opened than just remove the this.products.map() part from onProductComponent
public products = [
{ name: "Product 1", price: 101, isShown: false },
{ name: "Product 2", price: 102, isShown: false },
{ name: "Product 2", price: 103, isShown: false },
{ name: "Product 3", price: 104, isShown: false },
{ name: "Product 5", price: 105, isShown: false }
];
onProductComponent(product) {
this.products.map(p => {
if (product !== p) {
p.isShown = false;
}
});
product.isShown = !product.isShown;
}
This will lead to change in HTML because you can move the hidden section inside of the loop. Because you don't need to save product.
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let product of products; index as i">
<tr>
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
Open
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12">
<div *ngIf="product.isShown" class="row container-fluid" id="divshow">
<span class="text-left">{{product.name}}</span>
<span class="text-left">{{product.price}}</span>
</div>
</td>
</tr>
</thead>
</ng-container>
</tbody>
</table>
</div>
You can check a working example here
I have to the below JSON data in a bootstrap table. I can show the one level data, but I don't know how to show array inside array data in bootstrap table.
[
{
"seriesName": "Indian Bank",
"dataVlaues": {
"11/12/2017": 50,
"11/13/2017": 40,
"11/14/2017": 60,
"11/11/2017": 100
}
},
{
"seriesName": "Indian Bank1",
"dataVlaues": {
"11/18/2017": 12,
"11/17/2017": 27,
"11/16/2017": 30,
"11/15/2017": 101
}
}
]
Please find working solution below, enjoy :)
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.userTypes = [{
"type": 'Parent',
"options": {
"option1": "11QWERT",
"option2": "22QWERT"
}
}, {
"type": 'Parent1',
"options": {
"option22": "11QWERT",
"option222": "22QWERT"
}
}];
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in userTypes">
<td>{{user.type}}</td>
<td>
<button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
Show
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="showOptions">
<td colspan="2">
<table class="table table-bordered">
<tbody>
<tr ng-repeat="(key, val) in user.options">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Please check this jsfiddle link
https://jsfiddle.net/lalitSachdeva1/0xb732e1/1/
I have updated the ul li to table like structure;
your js will remain same and the key concept here is ng-repeat-start and ng-repeat-end
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<thead>
<tr>
<td>parent</td>
<td>option1</td>
<td>option2</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in userTypes">
<td>{{user.type}}</td>
<td ng-repeat-start="(key,value) in user.options">{{key}}</td>
<td ng-repeat-end="(key,value) in user.options">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I am using angularjs and i want to create dynamic row with ng-repeat but unable to achieve. I will clear after see my code. Here is my code and jsfiddle:-
td.controllers.js
function TodoCtrl($scope) {
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
}
td.html
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products" colspan="2">{{product.name}}</th>
</tr>
<tr>
<th>A</th> //I want to dynamic it
<th>B</th> //
</tr>
</thead>
</table>
</div>
</div>
My desire output is:-
-----------------------------
Month | Abc | Bil | Smart
| A|B | A|B | A|B
----------------------------
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th> <!--I want to dynamic it-->
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</div>
Try this code
Here table header is created dynically and table data also.
Let me know if you are getting nay problem
try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<div>
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th>
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
I have data like
{ column : [a,b,c], data : [["a",1,2],["b",4,5],["c",3,2]]}
table structure
<input type="text" ng-module="search">
<thead>
<tr>
<th ng-repeat="n in column" ng-click="click($index)">n</th>
</tr>
</thead>
<tr ng-repeat="i in data | filter:search">
<td ng-repeat="j in i">i</td>
</tr>
how to make a search logic by columns?
I could search by any input but not by specific column
I want to make a hierarchical data table with angularjs.
For example, it can lower the table and took a table in the first row of the table.
How can I create nested tables this event ?
I wrote how I wanted to do something as an example below.
Please hepl me! Thank you.
Example:
<table>
<thead>
<tr>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
</tr>
<tr>
<td style="margin-left: 10px">
<table>
<thead>
<tr>
<th>Head 1.1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1.1</td>
</tr>
<table>
<thead>
<tr>
<th></th>
</thead>
<tbody>
<tr>
<td>Content 1.1.1</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
First of all - Table in Tables is valid html (see: Is a html table within a table valid?)
Second of all - What is the real question here? You need a controller storing the data you want to display. You can iterate with ng-repeat to get the structure.
It looks like you want to display a Table of Contents. A list is a better option here:
HTML:
<div ng-controller="TableController">
<ul>
<li ng-repeat="c in content">
{{c.header}}
<ul>
<li ng-repeat="cc in c.content">{{cc}}</li>
</ul>
</li>
</ul>
</div>
Controller:
var app = angular.module("tableApp", []);
app.controller("TableController", ["$scope",function($scope){
$scope.content = [
{ header: "Head 1", content: ["Content 1"]},
{ header: "Head 1.1", content: ["Content 1.1", "Content 1.1.1"]}
];
}]);
// See: https://jsfiddle.net/6se8xq41/
see example here