I want to render tables out of JSONs. The keys should be the TH-tag and the value the TD-tad under it. I managed to render the tables the other way around:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.init = function(){
$scope.json = {
"entities":{"bezeichnung":"Basis","name":"Basis","id":16},
"entities2":{"bezeichnung":"Basis2","name":"Basis2","id":17}
}
}
});
</script>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<div ng-repeat="(key,value) in json">
<table border="1">
<tr ng-repeat="(k,val) in value"><td>{{k}}</td><td>{{val}}</td></tr>
</table>
</div>
</div>
But how to do it the other way around?
jsfiddle
You need to iterate over the keys once for the headings, then iterate over the values for the row.
<div ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<div ng-repeat="(key, table) in json">
<table border="1">
<thead>
<tr>
<th ng-repeat="(key, _) in table">{{key}}</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="(_, value) in table">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Updated jsfiddle.
you also do like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', function ($scope) {
$scope.json = [
{ "bezeichnung": "Basis", "name": "Basis", "id": 16 },
{ "bezeichnung": "Basis2", "name": "Basis2", "id": 17 }
]
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<table>
<tr>
<td>Index</td>
<td>bezeichnung</td>
<td>name</td>
<td>Id</td>
</tr>
<tr ng-repeat="(key,value) in json">
<td>{{key}}</td>
<td>{{value.bezeichnung}}</td>
<td>{{value.name}}</td>
<td>{{value.id}}</td>
</tr>
</table>
</div>
</body>
</html>
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 am trying to dynamically generate a name for the ng-model on the select tags, and have it accessible in the parent scope like on table two, but obviously have them work independent of each other.
So my question is how do I set the ng-model to something like "$parent.ot1" data array of objects?
var overtimeapp = angular.module('overtime', []);
overtimeapp.controller('ctrlOvertime', function ($scope, $http) {
$scope.overtimes = [{"otid" : "ot1"}, {"otid" : "ot2"}];
$scope.overtimetypes = ['d', 'n', 'r', 's', 'h'];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="overtime" ng-controller="ctrlOvertime">
table one
<table class="table table-bordered">
<tbody>
<tr ng-repeat="o in overtimes">
<td>
<select class="w3-select" ng-model="o.otid" ng-options="x for x in
overtimetypes"></select>
</td>
</tr>
</tbody>
</table>
table two
<table class="table table-bordered">
<tbody>
<tr ng-repeat="o in overtimes">
<td>
<select class="w3-select" ng-model="$parent.selected" ng-options="x for x in
overtimetypes"></select>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Initialize $scope.selected as an array in the controller:
$scope.selected = [];
Then use $index in the ng-model directive:
<table class="table table-bordered">
<tbody>
<tr ng-repeat="o in overtimes">
<td>
<select class="w3-select"
̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶$̶p̶a̶r̶e̶n̶t̶.̶s̶e̶l̶e̶c̶t̶e̶d̶"̶
ng-model="selected[$index]"
ng-options="x for x in overtimetypes">
</select>
</td>
</tr>
</tbody>
</table>
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>
* 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"
}]