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](http://stackoverflow.com/questions/22209117/create-table-from-json-data-with-angularjs-and-ng-repeat) — Mahi, Nov 19 '16 at 22:12

score 1 · Answer 1 · answered Mar 21 '17 at 11:17

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>

score 0 · Answer 2 · answered Nov 19 '16 at 22:20

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 '16 at 22:20

Morgan Delaney

2,349
3
20
23

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

2 Answers2