Question

我有以下数组数据，我想使用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}
              ]

Answer 1

这是带有ng-repeat和数组数据的工作示例...

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

Answer 2

欢迎来到Angular！你会经常使用这种模式：

将data附加到控制器中的$scope
将ng-repeat="row in data"属性添加到tr元素
在ng-bind="row.status元素

td

Plunkr

使用Angularjs ng-repeat将数组数据放入某个结构中

2 个答案: