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

[angularjsとngのリピートでJSONデータから表を作成します]の可能複製（http://stackoverflow.com/questions/22209117/create- json-data-with-angularjs-and-ng-repeat） – Mahi

は角へようこそ！あなたは、このパターンをたくさん使うことになるでしょう：

td要素

Plunkrにtr要素

使用ng-bind="row.statusにng-repeat="row in data"属性を追加します

あなたのコントローラに$scopeにdataを取り付け

出典

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を使用して構造体に配列データを配置する

答えて

関連する問題