Use Angularjs ng-repeat to put array data in some structure

Question

I have the following array data,,I want to use Angularjs ng-repeat to put this data in table like the following image, Can anyone help please?

      var data=[
              {status:"open",year:2014,value:100.00},
              {status:"open",year:2015,value:200.00},
              {status:"open",year:2016,value:300.00},
              {status:"approved",year:2016,value:10.00},
              {status:"approved",year:2015,value:20.00},
              {status:"approved",year:2016,value:30.00},
              {status:"closed",year:2016,value:1.00},
              {status:"closed",year:2014,value:3.00},
              {status:"closed",year:2013,value:-10.00}
              ]

Possible duplicate of Create Table from JSON Data with angularjs and ng-repeat — Mahi
– Mahi, Commented Nov 19, 2016 at 22:12

SantoshK · Accepted Answer · 2017-03-21 11:17:07Z

Here is Working Example with ng-repeat and array data...

// Code goes here
var app = angular.module('soApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.data = [
    {status:"open",year:2014,value:100.00},
    {status:"open",year:2015,value:200.00},
    {status:"open",year:2016,value:300.00},
    {status:"approved",year:2016,value:10.00},
    {status:"approved",year:2015,value:20.00},
    {status:"approved",year:2016,value:30.00},
    {status:"closed",year:2016,value:1.00},
    {status:"closed",year:2014,value:3.00},
    {status:"closed",year:2013,value:-10.00}
  ];
}])

table{border:1px solid #ccc; font-size:12px; width:100%;     border-collapse: collapse;}
table td, table th{border:1px solid #ccc; padding:5px;}

 <!DOCTYPE html>
<html ng-app="soApp">

  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <style type="text/css">
      body{font-family:'helvetica', 'arial', sans-serif;}
      td,th{padding:0 10px;text-align:left;}
    </style>
  </head>

  <body ng-controller="DemoController">
    <table>
      <thead>
        <tr>
          <th>Status</th>
          <th>Year</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in data">
          <td ng-bind="row.status"></td>
          <td ng-bind="row.year"></td>
          <td ng-bind="row.value"></td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Morgan Delaney · Accepted Answer · 2016-11-19 22:20:02Z

0

Welcome to Angular! You'll be using this pattern a lot:

Attach data to $scope in your controller
Add the ng-repeat="row in data" attribute to a tr element
Use ng-bind="row.status on the td elements

Plunkr

answered Nov 19, 2016 at 22:20

Morgan Delaney

2,4593 gold badges21 silver badges23 bronze badges

Collectives™ on Stack Overflow

Use Angularjs ng-repeat to put array data in some structure

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related