Filling table in angular js using ng-repeat

Question

I am able to fill the contents row-by-row. However, I was wondering how would we fill a table with two columns. I want it to be filled columnwise without repeating contents. Basically, it should return a table with two rows and two columns.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">

<table align=center>
    <tr>
        <td>{{x}}</td>
        <td>{{x}}</td>
    </tr>
</table>
</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});
</script>

</body>
</html>

I'm not exactly sure what you're trying to accomplish, at this moment, you are repeating the table element. So you're creating 5 tables, each with one row and two columns. Can you be a little bit clearer with the column-wise part? — samson
– samson, Commented Feb 27, 2017 at 0:24
You need to rearrange your data in array to map to your table so that you can use ng-repeat. — Hacker
– Hacker, Commented Feb 27, 2017 at 7:13

BHUVANESH MOHANKUMAR · Accepted Answer · 2017-02-27 00:37:43Z

1

In AngularJS the data are manipulated mostly in JSON and collected as Array data structure.

Get your data from API or service call and convert the data into appropiate array of objects, then the data can be easily assigned to the table column and the record values are assigned to each row of the table using the "ng-repeat" in AngularJS.

In the below code you can see the "ng-repeat" and "x in records" is used as the loop for iterating through records of data values and assign to table.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">

<table align=center>
    <tr>
        <td>{{x.name}}</td>
    </tr>
    <tr>
        <td>{{x.location}}</td>
    </tr>

</table>
</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {"name":"Alfreds Futterkiste", "location":"avenue1"},
    {"Berglunds snabbköp", "location":"avenue2"},
    {"name":"Centro comercial Moctezuma", "location":"avenue3"},
    {"name":"Ernst Handel", "location":"avenue4"},
  ]
</script>

</body>
</html>

edited Feb 27, 2017 at 0:37

BHUVANESH MOHANKUMAR

2,8071 gold badge35 silver badges33 bronze badges

answered Feb 27, 2017 at 0:21

Ricardo Zorzo

2991 silver badge9 bronze badges

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

1 Comment

Raj Over a year ago

I know how to extract json details. I want to have two json objects side-by-side as shown in description. I appreciate your efforts though.

Rohit · Accepted Answer · 2017-02-28 07:31:10Z

1

Change your code like below

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records" ng-if="$even">

<table align=center>
    <tr>

        <td>{{x}}</td>
        <td>{{records[$index+1]}}</td>
    </tr>
</table>
</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});
</script>

</body>
</html>

answered Feb 28, 2017 at 7:31

Rohit

713 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-02-28 06:44:23Z

0

Your $scope is not taking, change your $scope like js array of object. And Give ng-repeat in correct place. Change your code like below.

<html>
<head>
<script src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js "></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',['$scope', function($scope){
$scope.records = [{name:"Alfreds Futterkiste", location:"avenue1"},{name:"Berglunds snabbköp", location:"avenue2"},{name:"Centro comercial Moctezuma", location:"avenue3"},{name:"Ernst Handel", location:"avenue4"}];
$scope.records1 = [{name:"Centro comercial Moctezuma", location:"avenue1"},{name:"Ernst Handel", location:"avenue2"},{name:"Berglunds snabbköp", location:"avenue3"},{name:"Alfreds Futterkiste", location:"avenue4"}];
}]);
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<table align=center>

            <tr>
              <th>Object one</th>
              <th>Object two</th>            
            </tr>
       
    <tr ng-repeat="x1 in records">    
       <td>{{x1.name}}</td>       
       <td>{{records1[$index].name}}</td>
    </tr>
 
              
</table>
<br>

Your code result:-

<h3 ng-repeat="x in records">
<table align=center>
<tr>
              <th>Country</th>
              <th>Languages</th>              
            </tr>
    <tr>
       <td>{{x.name}}</td>
        <td>{{x.location}}</td>
    </tr>
</table>
</h3>
</div>
</body>
</html>

$scope.records = [
    {name:"Alfreds Futterkiste", location:"avenue1"},
    {name:"Berglunds snabbköp", location:"avenue2"},
    {name:"Centro comercial Moctezuma", location:"avenue3"},
    {name:"Ernst Handel", location:"avenue4"},
  ];

<table align=center>
    <tr ng-repeat="x in records">
        <td>{{x}}</td>
        <td>{{x}}</td>
    </tr>
</table>

edited Feb 28, 2017 at 6:44

answered Feb 27, 2017 at 6:48

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

2 Comments

Raj Over a year ago

I know how to extract json details. I want to have two json objects side-by-side as shown in description. I appreciate your efforts though

Manikandan Velayutham Over a year ago

Oh you want two object side by side? now see my updated answer.

Collectives™ on Stack Overflow

Filling table in angular js using ng-repeat

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related