formatting displaying data from angularjs

Question

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              |
> -------------------------------

Put the ng-repeat on the table instead

Oladapo Omonayajo
– Oladapo Omonayajo

2017-02-15 07:37:19 +00:00
Commented Feb 15, 2017 at 7:37 — Oladapo Omonayajo
– Oladapo Omonayajo, Commented Feb 15, 2017 at 7:37

Denver Gomes · Accepted Answer · 2017-02-15 07:42:10Z

0

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>

edited Feb 15, 2017 at 7:42

answered Feb 15, 2017 at 7:21

Denver Gomes

541 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

faisaljanjua Over a year ago

no, then its repeat the tr only, The 'KEY' is static. only 'Value' is fetching from angularjs function.

coder · Accepted Answer · 2017-02-15 09:18:57Z

0

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"
}]

answered Feb 15, 2017 at 9:18

coder

8,74216 gold badges41 silver badges54 bronze badges

Collectives™ on Stack Overflow

formatting displaying data from angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related