API is connected well and showing display data, now facing the issue of formatting data into table.
using ng-repeat="item in items",
if use in tr then only 1 row shows, if using in tbody, then its repeats tbody.
HTML code
<tbody ng-repeat="item in itemsc">
<tr >
<th width="15%">Country</th>
<td width="85%">{{item.name}}</td>
</tr>
<tr>
<th>Flag</th>
<td>
<img ng-src="/assets/images/f/{{item.iso2 | lowercase}}.png" />
</td>
</tr>
<tr>
<th>Capital</th>
<td>{{item.capital}}</td>
</tr>
<tr>
<th>Region</th>
<td>{{item.region}}</td>
</tr>
<tr>
<th>Region</th>
<td>{{item.subRegion}}</td>
</tr>
<tr>
<th>GPS</th>
<td>Latitude: {{item.latitude}} | Longitude: {{item.longitude}}</td>
</tr>
</tbody>
Keep the data format like this.
Country,Flag,Catpital,Region,GPS are static.
> -------------------------------
| Country | Value |
> -------------------------------
| Flag | Value |
> -------------------------------
| Catpital | Value |
> -------------------------------
| Region | Value |
> -------------------------------
| GPS | Value |
> -------------------------------
Code snippet added below: Please have a look at angular code, and way it is implemented in a table. Cheers.!
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript">
angular.module("todoApp", [])
.controller("MainController", function($scope){
$scope.Products = [];
for(var i = 0; i < 3; i++)
{
var app = {
ProductId: i,
ProductName: 'ProductName' + (i + 1),
ProductCategory: 'ProductCategory' + (i + 1)
};
$scope.Products.push(app);
}
});
</script>
</head>
<body ng-app="todoApp">
<div ng-controller="MainController">
<table>
<tbody ng-repeat="product in Products">
<tr>
<td>
<div style="padding-bottom: 10px;">
<table border="1" cellpadding="2">
<tr>
<td>Sr.No</td>
<td>{{$index + 1}}</td>
</tr>
<tr>
<td>Product Name</td>
<td>{{product.ProductName}}</td>
</tr>
<tr>
<td>Product Category</td>
<td>{{product.ProductCategory}}</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try moving ng-repeat="item in itemsc" from tbody to tr.
This should probably solve your problem.
Ideally the format should be as:
<table>
<thead>
<tr>
<td>Sr.#</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="prop in Properties">
<td>{{$index + 1}}</td>
<td>{{prop.Name}}</td>
</tr>
</tbody>
</table>
According to your requirement the easy way to do this is changing the object structure you are passing to the list (itmes)
eg.
[{
"column1Value": "Country",
"column2Value": "Value"
}, {
"column1Value": "Flag",
"column2Value": "Value"
}, {
"column1Value": "Capital",
"column2Value": "Value"
}, {
"column1Value": "Region",
"column2Value": "Value"
}, {
"column1Value": "GPS",
"column2Value": "Value"
}]
Related
I have a scope array
$scope.myArr = [{'id':'1','vehicle':'car'},{'id':'1','vehicle':'bike'}]
I need to show this data in my html page as below
|id|vehicle|
|--|-------|
|1 |car |
|2 |bike |
Is there any way I can achieve this.
Use ng-repeat like this,
<tr>
<th ng-repeat="(key, val) in myArr[0]">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArr">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
DEMO
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.myArr = [{'id':'1','vehicle':'car'},{'id':'1','vehicle':'bike'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myController" border="1">
<tr>
<th ng-repeat="(key, val) in myArr[0]">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArr">
<td ng-repeat="column in row">
{{ column }}
</td>
</tr>
</table>
</body>
I want to change the number of columns on modifying a boolean variable.
Check my example (in plnkr):
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('myCtrl', function($scope, $log) {
$scope.debug = {};
$scope.fields = [{
header: "first",
hideField: !$scope.debug.flag
},
{
header: "second"
},
{
header: "third"
},
{
header: "fourth"
},
];
$scope.entries = [{
first: "hello1",
second: "hello2",
third: "hello3",
fourth: "hello4"
}, ]
$scope.myBool = true;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="myCtrl">
<button id="testButton" class='btn btn-danger' ng-click='debug.flag = !debug.flag'><i class="glyphicon glyphicon-hand-right"></i> refreshFields! debug.flag = {{!!debug.flag}}</button>
<hr>
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h4 class="label label-info">table 2 with ng-if => property.hideField = false</h4>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h2 class="label label-info">table 3 without ng-if</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
How to reproduce it:
Click on the red button and the flag will toggle from false to true.
Expected behavior:
Table 1 starts with 3 columns. It should show four after clicking.
Table 2 starts with 1 column. It should show 0 columns after clicking.
Table 3 is just a control table with all the data.
Your heading would become visible if you modified the value of its hideField property. But you're not doing that. You're modifying the value of $scope.debug.flag.
The fact that hideField was initialized with the value of $scope.debug.flag won't magically change hideField every time you change $scope.debug.flag.
Just like if you do
var a = 1;
var b = a;
a = 42;
The value of b will still be 1. Not 42.
Changing the value of $scope.debug.flag won't change the value of hideField. Because, it has already been initialized at the time of controller load. The workaround you can apply here is bind that hideField to a method and evaluate that in your ng-if. Sample below.
JS:
$scope.fields = [{
header: "first",
hideField: function() {
return !$scope.debug.flag;
}
}, {
header: "second"
}, {
header: "third"
}, {
header: "fourth"
}, ];
HTML:
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField()">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField()">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
This is not a clean solution though. But, still will solve your problem.
I have to filter the list of an array using the orderBy filter. In my case, having multiple orderBy is not working, only with a single orderBy is it working properly. How do I implement that?
//here we create the product array and display the array in the HTML page.
var app=angular.module("App",[]);
app.controller("Cont",function($scope){
var product = [
{:"110",ename:"Harry",esalary:"25000",ecity:"Agar"},
{pid:"109",ename:"potter",esalary:"11000",ecity:"US"},
{pid:"101",ename:"Peter",esalary:"1200",ecity:"London"},
{pid:"104",ename:"Janifer",esalary:"12000",ecity:"Bejing"},
{pid:"103",ename:"Selena",esalary:"35000",ecity:"England"},
{pid:"102",ename:"Lokesh",esalary:"32500",ecity:"Malwa"},
{pid:"108",ename:"Gotm",esalary:"8910",ecity:"Ujain"},
{pid:"106",ename:"Soni",esalary:"16000",ecity:"bhopal"},
]
$scope.products=product;
});
<html>
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="App" ng-controller="Cont">
<form align="center">
<table align="center" border="2">
<thead>
<tr>
<th>pid</th>
<th>ename</th>
<th>esalary</th>
<th>ecity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in products | orderBy:['pid','ename','esalary']">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td>{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
</tbody>
</table>
</form>
</body
</html>
var app = angular.module("App", []);
app.controller("Cont", function($scope) {
var product = [
{
'pid': "110",
'ename': "Harry",
'esalary': "25000",
'ecity': "Agar"
},
{
'pid': "109",
'ename': "potter",
'esalary': "11000",
'ecity': "US"
},
{
'pid': "101",
'ename': "Peter",
'esalary': "1200",
'ecity': "London"
},
{
'pid': "104",
'ename': "Janifer",
'esalary': "12000",
'ecity': "Bejing"
}]
$scope.products = product;
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app="App" ng-controller="Cont">
<form align="center">
<table align="center" border="2">
<thead>
<tr>
<th>pid</th>
<th>ename</th>
<th>esalary</th>
<th>ecity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in products | orderBy:'pid' | orderBy:'ename'">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td>{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Try this :
<tr ng-repeat="x in products | orderBy:['pid','ename']">
<td>{{x.pid}}</td>
<td>{{x.ename | uppercase}}</td>
<td>{{x.esalary }}</td>
<td>{{x.ecity}}</td>
</tr>
I'm new to angularjs. How to get the total amount in the table Total Amount column and display in input textbox? I think this plunker can solve my problem but I can't access it now. http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview
Here is my table sample
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_queue in data | filter:searchFilter">
<td>{{payment_queue.product_name}}</td>
<td>{{payment_queue.sold_quantity}}</td>
<td>{{payment_queue.amount}}</td>
</tr>
</tbody>
</table>
Total Amount: <input type="text value=""> <--- the total amount value goes here...
js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('productsalesController', ['$scope', '$http', function ($scope, $http) {
$scope.data=[];
$http.get("../php/paymentQueuedata.php")
.success(function(data){
$scope.data = data;
})
.error(function() {
$scope.data = "error in fetching data";
});
}]);
php json
<?php
//database settings
$connect = mysqli_connect("localhost", "root", "", "rmsdb");
$result = mysqli_query($connect, "select * from payment_queue");
$data = array();
while ($row = mysqli_fetch_array($result)) {
$data[] = $row;
}
print json_encode($data);
?>
There a way to get the totals without using a function.
Just use ng-init. If you need to allow the list to change or be filtered, use ng-repeat with it to force recalculation of the totals.
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Ext</th>
</tr>
</thead>
<tbody ng-repeat="_ in [ [ search, products ] ]" ng-init="total = 0">
<tr ng-repeat="product in products | filter: search">
<td>{{ product.name }}</td>
<td>{{ product.quantity }}</td>
<td>{{ product.price }}</td>
<td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
</tr>
<tr>
<td><b>Total</b></td>
<td></td>
<td></td>
<td><b>${{ total }}</b></td>
</tr>
</tbody>
</table>
See http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview for a workinig example.
My solution to my problem..
in my controller
$scope.totalAmount = function(){
var total = 0;
for(count=0;count<$scope.data.length;count++){
total += parseInt($scope.data[count].total_amount,10);
}
return total;
};
in html
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_queue in data | filter:searchFilter">
<td>{{payment_queue.product_name}}</td>
<td>{{payment_queue.sold_quantity}}</td>
<td>{{payment_queue.amount}}</td>
</tr>
</tbody>
</table>
Total Amount: <input type="text value="{{ totalAmount() }}"> <--- the total amount value goes here...
You can do like this. This is good solution for your problem.
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table class="table table-striped">
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.years}}</td>
<td>{{item.amount}}</td>
<td>{{item.interest}}%</td>
</tr>
<tr>
<td>Total:</td>
<td>{{getTotal('years')}}</td>
<td>{{getTotal('amount')}}</td>
<td>{{getTotal('interest')}}</td>
</tr>
</tbody>
</table>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: 'xxx', amount: 13, years: 3, interest: 2},
{name: 'yyy', amount: 23, years: 4, interest: 3},
{name: 'zzz', amount: 123, years: 4, interest: 4}
];
$scope.getTotal = function(int) {
var total = 0;
angular.forEach($scope.items, function(el) {
total += el[int];
});
return total;
};
});
you can use this url also. Thank you !!!
http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview
How to Sort the Auto Increment Serial number Column in angularjs Table ?
I'm having Serial Number Column with Auto Increament, I need to Sort the Column.
My Source Code is
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>D.O.B.</th>
</tr>
</thead>
<tr ng-repeat="x in names | orderBy:orderByField:reverseSort">
<td>{{ $index + 1 | number }}</td>
<td>{{ x.Name }}</td>
<td><span ng-if="x.DOB">{{ formatDate(x.DOB) | date:'dd-MM-yyyy' }}</span></td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = [
{ Name: 'Jani', DOB: '' },
{ Name: 'Hege', DOB: '1995-05-07' },
{ Name: 'Kai', DOB: '1995-08-24' }
];
$scope.formatDate = function (date) {
return new Date(date);
};
});
</script>
</body>
</html>
The Auto Increment Part is {{ $index + 1 }} within <td> tag.
In Angular 2+ you can use like this:
<div *ngFor="let item of items; let ndx = index">
<div>{{ndx+1}}</div>
</div>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
table tr th{
cursor:pointer;
}
table tr th:hover{
background:#ddd;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('num')">Sl.No</th>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{$index + 1}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
</body>
</html>
You can use like this
<tr *ngFor="let user of userList ;let i = index">
<td>{{i+1}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.userName}}</td>
<td>{{user.email}}</td>
</tr>