使用Angularjs ng-repeat將數組數據放入某個結構中

我有下列數組數據，我想用Angularjs ng-repeat將這些數據放在表中，如下圖所示，任何人都可以幫忙嗎？使用Angularjs ng-repeat將數組數據放入某個結構中

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

來源

2016-11-19 Ali-Alrabi

的[從JSON數據與angularjs和NG-重複創建表]可能的複製（http://stackoverflow.com/questions/22209117/create-表從-JSON數據與 - angularjs和 - NG-重複） – Mahi

歡迎角！您將使用這個模式很多：

在你的控制器連接到data$scope
的ng-repeat="row in data"屬性添加到tr元素
使用ng-bind="row.status在td元素

Plunkr

來源

2016-11-19 22:20:02

這裏是使用ng-repe的實例在與陣列數據...

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

來源

2017-03-21 11:17:07 santoshK

使用Angularjs ng-repeat將數組數據放入某個結構中

回答

相關問題