Leverage Angularjs ng-repeat to organize array data within a specific framework

Question

Leverage Angularjs ng-repeat to organize array data within a specific framework

I have an array of data that I need help turning into a table using AngularJS ng-repeat. Can anyone assist with this task?

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

https://i.sstatic.net/XOfbk.png

javascript angularjs

Answer 1

Answer №1

Here is a demonstration of how to use ng-repeat with array data...

// Example using ng-repeat with AngularJS
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>

Answer 2

Here is a demonstration of how to use ng-repeat with array data...

// Example using ng-repeat with AngularJS
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>

Answer 3

Answer №2

Greetings and welcome to the world of Angular! Get ready to become well-acquainted with this common procedure:

Assign your data to the $scope within your controller
Insert the ng-repeat="row in data" attribute into a tr element
Employ ng-bind="row.status on the td elements

Take a look at this Plunker example

Answer 4

Greetings and welcome to the world of Angular! Get ready to become well-acquainted with this common procedure:

Assign your data to the $scope within your controller
Insert the ng-repeat="row in data" attribute into a tr element
Employ ng-bind="row.status on the td elements

Take a look at this Plunker example

Leverage Angularjs ng-repeat to organize array data within a specific framework

Answer №1

Answer №2

Similar questions

Uploading Files with Angular and Including Extra Data in ASP.NET Web API

Is there a way to set an antd checkbox as checked even when its value is falsy within an antd formItem?

Using the HttpPut method in conjunction with a route controller

Getting Your Redux Form Ready for Submission

Tips for navigating a dynamic viewport using scroll movement

Action in ASP.NET MVC API is giving a 404 error, while the rest of the actions are

Error with declaring TypeScript class due to private variable

Vue.js: The href attribute in a link is different from the data

Defining the active element in the menu using JavaScript

Tips for retrieving a selected date from an HTML textbox labeled as "Date"

Is there a way to use jQuery to enable multiple checkboxes without assigning individual IDs to each one?

transferring data to and from a secure website

Using the class attribute for Pagedown instead of the id keyword

Executing an HTML webpage with npm package.json file

Show the menu when hovering in reactjs

Pass data from controller using Ajax in CodeIgniter

Issue with Backbone: Browser button failing to activate routes

Scraping a JavaScript page using Python without requiring a browser installation

Craft a brief description for every individual component discovered

The mesh's position has become invalid due to the dynamic change in vertices' positions