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>
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 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 want to show json data inside a table using AngularJS ng-repeat but my first row of the table remains empty as I am not accessing the first row of json data.I want to omit the first row of json data inside the table. How to achieve this?
My json format :
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
Try using ng-if like this
<tr ng-repeat="data in list1" ng-if="$index > 0">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
Change code like :
<tr ng-repeat="data in list track by $index" ng-if="!$first">
Simply ng-if and there's no need for increasing $index shown.
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list" ng-if="$index">
<td> {{$index }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1" ng-if="$index">
<td> {{$index }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
If you want to omit the first row in ng-repeat, you can track row's with $index on skip $index = 0 using ng-if
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list track by $index" ng-if="$index > 0">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
Essentially I need to add a little button or something within the headers of the table to be able to sort the data alphabetically by column. I've been having trouble with doing this making use of AngularJS and need some help with it.
This is a snippet showing the table and...
<div class="col-md-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Status</th>
<th>Ref</th>
<th>Service</th>
<th>Domain</th>
<th>Service Owner</th>
<th>Stage</th>
</tr>
</thead>
<tbody>
<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProp">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td><u>{{x.c}}</u></td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is a plnkr of the code http://plnkr.co/edit/OkRbR9geeOcCGy2K01jB?p=preview
Give this a try for a very simple solution:
HTML:
<table>
<thead>
<tr>
<th>Status<a ng-click="orderProperty = 'a'">^</a></th>
<th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
<th>Service<a ng-click="orderProperty = 'c'">^</a></th>
<th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
<th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
<th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in projects | orderBy:orderProperty">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
</tbody>
</table>
JavaScript:
app.controller('controller', function($scope) {
$scope.orderProperty = "f"; // Sort by "f" by default
$scope.projects = [...];
});
Working jsFiddle here: http://jsfiddle.net/ben1729/3nxykbhk/
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>