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>
Related
This is the code that I tried but only values of cardno and cardtype why am I not able to access the rest of them? Any suggestions?
<tr ng-repeat="data in myData17.layouts">
<td ng-show="$index==1">{{data.name}}</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards">
<td>{{card.cardNo}}</td>
</tr>
</table>
</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards">
<td>{{card.cardType}}</td>
</tr>
</table>
</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards.ports">
<td>{{card.portNo}}</td>
</tr>
</table>
</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards.ports">
<td>{{card.portName}}</td>
</tr>
</table>
</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards.ports">
<td>{{card.portType}}</td>
</tr>
</table>
</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards.ports">
<td>{{card.portspeed}}</td>
</tr>
</table>
</td>
<td ng-show="$index==1">
<table>
<tr ng-repeat="card in data.cards.ports">
<td>{{card["ds-scheduler-node-profile"]}}</td>
</tr>
</table>
</td>
</tr>
This is the my data.
{
"name": "twoCardOneEthportAndOne10G",
"cards": [{
"cardNo": "1",
"cardType": "Ethernet",
"ports": [{
"portNo": "1",
"portName": "LAN1",
"portType": "ethernetCsmacd",
"portspeed": "eth-if-speed-1gb",
"ds-scheduler-node-profile": "default"
}]
},
{
"cardNo": "10",
"cardType": "Ethernet",
"ports": [{
"portNo": "1",
"portName": "10GE",
"portType": "ethernetCsmacd",
"portspeed": "eth-if-speed-10gb",
"ds-scheduler-node-profile": "default"
}]
}]
}
data.cards.ports isn’t a thing.
The ports property is of a singular card and cards is an array.
It would have to be accessed like so:
data.cards[0].ports
So, how would this be structured in your code? You would need something like this (this isn’t a solution to your exact implementation just a visual guide to help you access your data in the way you require)
<div ng-repeat=“data in myData17.layouts”>
{{ data.name }}
<div ng-repeat=“card in data.cards”>
{{ card.cardNo }}
<div ng-repeat=“port in card.ports”>
{{ port.portNo }}
</div>
</div>
</div>
Hope that this gives you a better understanding and good luck
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 this table like in photo. In this I want to calculate function for price* quantita = subtotale and to sum Totale=Sum(Subtotale).
My html code:
<table align="center" class="table table-bordered" >
<thead>
<tr>
<th>Price</th>
<th>Quantita</th>
<th>Note</th>
<th>Subtotale</th>
</tr>
</thead>
<tbody>
<tr*ngFor="let item of products">
<td>1</td>
<td>{{item.Quantity}} </td>
<td>test</td>
<td></td>
</tr>
</tbody>
</table>
<br>
<p style="text-align: right; width:95%;">Totale: ALL</p>
It just like in view
<td>{{item.Price}}</td>
<td>{{item.Quantity}} </td>
<td>test</td>
<td>{{item.Price * item.Quantity}}</td>
<div>Total : {{Total}}</div> //this call the get method Total.
For total in component write like below, use this total in view
let total = 0;
get Total() {
for(let p of products) {
total+ = p.Subtotale;
}
return total;
}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var i = 0;
$scope.total=0;
$scope.products = [
{
"name": "Product 1",
"quantity": 2,
"price": 10
},
{
"name": "Product 2",
"quantity": 6,
"price": 8
},
{
"name": "Product 3",
"quantity": 5,
"price": 26
},
{
"name": "Product 4",
"quantity": 10,
"price": 4
},
{
"name": "Product 5",
"quantity": 11,
"price": 7
}
];
$scope.updateTotal = function(){
angular.forEach($scope.products, function(product){
$scope.total += product.quantity*product.price;
});
};
$scope.updateTotal();
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Price * Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td><input ng-model="product.quantity" ng-change="updateTotal()"></td>
<td>{{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{total}}</b></td>
</tr>
</tbody>
</table>
</body>
</html>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var i = 0;
$scope.total=0;
$scope.products = [
{
"name": "Product 1",
"quantity": 2,
"price": 10
},
{
"name": "Product 2",
"quantity": 6,
"price": 8
},
{
"name": "Product 3",
"quantity": 5,
"price": 26
},
{
"name": "Product 4",
"quantity": 10,
"price": 4
},
{
"name": "Product 5",
"quantity": 11,
"price": 7
}
];
$scope.updateTotal = function(){
angular.forEach($scope.products, function(product){
$scope.total += product.quantity*product.price;
});
};
$scope.updateTotal();
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Price * Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td><input ng-model="product.quantity" ng-change="updateTotal()"></td>
<td>{{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{total}}</b></td>
</tr>
</tbody>
</table>
</body>
</html>
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>
* 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"
}]