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>
Related
I'm trying to replace my data in my table with strings "Yup" and " ": if the string is equal to "yes" then display "Yup" else don't display, Sorry I'm newbie and I saw some solutions and I tried this but doesn't work: {{ person.value ? "Yup":" "}} .. Any help please
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
value: [
{value:"Yes"},{value:"no"},{value:"yes"},
{value:"No"},{value:"no"}
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Value</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.value">
<td align="center">{{ person.value }}</td>
<td align="center">{{ person.value ? "Yup":" "}}</td>
</tr>
</tbody>
</table>
</div>
If you can't change your values you can call toLowerCase() on the value to make sure it's lower case and then compare it to "yes"
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
value: [
{value:"Yes"},{value:"no"},{value:"yes"},
{value:"No"},{value:"no"}
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Value</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.value">
<td align="center">{{ person.value }}</td>
<td align="center">{{ person.value.toLowerCase() == "yes" ? "Yup":" "}}</td>
</tr>
</tbody>
</table>
</div>
The reason your code wasn't working it because when you use a ternary (? :) it converts the values into truthy values, and a non-empty string will always be true, so every value is true and will always be "Yup"
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.register = {
value: [
{value:"Yes"},{value:"no"},{value:"yes"},
{value:"No"},{value:"no"}
],
};
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
<thead>
<tr align="center">
<th>Value</th>
<th>Replace</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in register.value">
<td align="center">{{ person.value }}</td>
<td align="center">{{ person.value.toLowerCase() == "yes" ? "Yup":" "}}</td>
</tr>
</tbody>
</table>
</div>
I have two json objects one is
Jobs
[
{
"code":"Maxo- 1033",
"title":"Test",
"deleted_by":2,
"updated_at":"2017-08-23 06:32:42"
},
{
"code":"Maxo- 1034",
"title":"Test",
"deleted_by":2,
"updated_at":"2017-08-24 04:55:10"
}
]
other is headers
[
"code",
"title",
"deleted_by",
"updated_at"
]
I want to print jobs data using headers data
like the below code.
<tbody>
<tr ng-repeat = 'job in jobs'>
<td ng-repeat = 'column in headers'>
#{{job.column}} //i want job.code for first iteration and like
</td>
</tr>
</tbody>
Expected Table Output:
code title deletedby updated_at
Maxo Test 2 2017-08-23 06:32:42
you can do it by nested ng-repeats
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.jobs = [{
"code": "Maxo- 1033",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-23 06:32:42"
}, {
"code": "Maxo- 1034",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-24 04:55:10"
}];
$scope.headers = [
"code",
"title",
"deleted_by",
"updated_at"
];
});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table>
<tbody>
<tr>
<th ng-repeat="header in headers">{{header}}</th>
</tr>
<tr ng-repeat="job in jobs">
<td ng-repeat="header in headers">{{job[header]}}</td>
</tr>
</tbody>
</table>
</body>
You can do this with nested ng-repeat
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
$scope.jobs = [{
"code": "Maxo- 1033",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-23 06:32:42"
}, {
"code": "Maxo- 1034",
"title": "Test",
"deleted_by": 2,
"updated_at": "2017-08-24 04:55:10"
}];
$scope.headers = ["code", "title", "deleted_by", "updated_at"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<table>
<thead>
<tr>
<th ng-repeat="header in headers">{{header| uppercase }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="job in jobs">
<td ng-repeat="header in headers"> {{job[header]}} </td>
</tr>
</tbody>
</table>
</body>
See this No need of Nested NgRepeat :
var app = angular.module('App',[]);
app.controller('Ctrl',function($scope){
$scope.jobs = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},{"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}];
$scope.Headers = [
"code",
"title",
"deleted_by",
"updated_at"
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App" ng-controller="Ctrl">
<table>
<thead>
<tr >
<th ng-repeat="h in Headers">{{h}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="job in jobs">
<td> {{job.code}} </td>
<td> {{job.title}} </td>
<td> {{job.deleted_by}} </td>
<td> {{job.updated_at}} </td>
</tr>
</tbody>
</table>
</body>
Here you have to play with table structure of html.
You can do like this:
JS
$scope.headerArr = ["code",
"title",
"deleted_by",
"updated_at"
]
$scope.childObj = [{"code":"Maxo- 1033","title":"Test","deleted_by":2,"updated_at":"2017-08-23 06:32:42"},
{"code":"Maxo- 1034","title":"Test","deleted_by":2,"updated_at":"2017-08-24 04:55:10"}]
HTML
<table>
<thead>
<tr >
<th ng-repeat = 'item in headerArr'>
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = 'item in childObj'>
<td >
{{item.code}}
</td>
<td >
{{item.title}}
</td>
<td >
{{item.deleted_by}}
</td>
<td >
{{item.updated_at}}
</td>
</tr>
</tbody>
</table>
Hope this demo will help you.
Try this
<tbody>
<tr ng-repeat = "job in jobs">
<td ng-repeat="header in headers">
{{job[header]}}
</td>
</tr>
</tbody>
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>
* here is html code for checkbox am using checkbox for dynamic value initiazation from databases but checkbox are not selecting any value*
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp}}</td> <td> <input type="checkbox" ng-model="emp.selected" value="{{emp.name}}"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and js controller code is
angular.forEach($scope.nodueaccountassets,function(emp){
if (emp.selected) $scope.albumNameArray.push(emp.name);
alert(emp.selected);
Assuming that you want to get the selected employees, you can do this,
var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.albumNameArray = [];
$scope.nodueaccountassets = [{
"name": "Raymond",
"age": 28,
"selected": false
}, {
"name": "Bruce",
"age": 96,
"selected": false
}, {
"name": "Laura",
"age": 62,
"selected": false
}];
$scope.getSelected = function() {
angular.forEach($scope.nodueaccountassets, function(emp) {
if (emp.selected)
$scope.albumNameArray.push(emp.name);
})
}
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="listController">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueaccountassets">
<tr>
<td>{{emp}}</td>
<td>
<input type="checkbox" ng-model="emp.selected" value="{{emp.name}}" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<button ng-click="getSelected()">Get Selected</button>
<ul>
<li ng-repeat=" opt in albumNameArray">
{{ opt }}
</li>
</ul>
</div>
</body>
</html>
possibly the value you are getting from server for emp.selected in string format instead of booleans you are getting value like "true",
check if you are getting response like this if so you need to convert selected object to boolean.
[{
name: 'sushil',
selected: "true"
}]
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>