如何在angularjs中安排JSON值？

-1

嗨需要幫助如何使用angularjs將此數組值循環到3列。如何在angularjs中安排JSON值？

目前我的看法是這樣的 Html table contain 3 column the value showing in vertical instead of horizontal 下面是我的JSON視圖

{ 
 
    "Table1": { 
 
    "titleList": [ 
 
     "Table1", 
 
     "Start Date", 
 
     "Completion Date" 
 
    ] 
 
    "dataList": [ 
 
     { 
 
     "Name": "Ayu", 
 
     "startDate": "30 Jul 2015", 
 
     "completionDate": "30 Jul 2015" 
 
     } 
 
    ], 
 
    }, 
 
    "Table2": { 
 
    "titleList": [ 
 
     "Table2", 
 
     "Start Date", 
 
     "Completion Date" 
 
    ] 
 
    "dataList": [ 
 
     { 
 
     "Name": "Siti", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, 
 
     { 
 
     "Name": "wan", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, 
 
     { 
 
     "Name": "nita", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, 
 
    ], 
 
    }, 
 
    "Table3": { 
 
    "titleList": [ 
 
     "HGA", 
 
     "Start Date", 
 
     "Completion Date" 
 
    ] 
 
    "dataList": [ 
 
     { 
 
     "Name": "Fatimah", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, 
 
     { 
 
     "Name": "Nora", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, 
 
    ], 
 
    
 
    } 
 
}

我angularjs顯示如下

<tbody ng-repeat ="(nodeSummaryKey, nodeSummaryVal) in nodeSummary"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t <tr ng-if="isObject(nodeSummaryVal)" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat = "(dataKey, dataValue) in nodeSummaryVal" > 
 
\t \t \t \t \t \t <td ng-if="dataKey == 'titleList'" class="stx-attributes-group" 
 
\t \t \t \t \t \t ng-repeat="(eachDataKey, eachDataValue) in nodeSummaryVal.titleList">{{eachDataValue}}</td> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t <td ng-if="dataKey == 'dataList'" ng-repeat="(eachDataKey, eachDataValue) in dataValue"> 
 
\t \t \t \t \t \t \t <div ng-repeat="(eachKey, eachValue) in eachDataValue">{{eachValue}}</div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </tbody>

來源

2017-07-03 Cput

我需要幫助如何使價值爲1行顯示1列顯示所有數據列表值代替。提前致謝。 – Cput

你的json是不正確的 –

我已經添加了我的完整JSON結果..請幫助，如果它真的不正確的地方是不正確的？以及如何解決它？到目前爲止，我可以將我的restservice中的數據顯示給UI，只是它的順序不能顯示在列中顯示的行中 – Cput

你可以通過簡單的NG-重複實現它：

angular.module('app', []).controller('Controller', function($scope) { 
 
    $scope.table_data = { 
 
    "Table1": { 
 
     "titleList": ["Table1", "Start Date", "Completion Date"], 
 
     "dataList": [{ 
 
     "Name": "Ayu", 
 
     "startDate": "30 Jul 2015", 
 
     "completionDate": "30 Jul 2015" 
 
     }], 
 
    }, 
 
    "Table2": { 
 
     "titleList": ["Table2", "Start Date", "Completion Date"], 
 
     "dataList": [{ 
 
     "Name": "Siti", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, { 
 
     "Name": "wan", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, { 
 
     "Name": "nita", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, ], 
 
    }, 
 
    "Table3": { 
 
     "titleList": ["HGA", "Start Date", "Completion Date"], 
 
     "dataList": [{ 
 
     "Name": "Fatimah", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, { 
 
     "Name": "Nora", 
 
     "startDate": "", 
 
     "completionDate": "" 
 
     }, ], 
 
    } 
 
    }; 
 

 
    
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
th, td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
}

<!DOCTYPE html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 
    <div ng-repeat="(dta_key,dta_value) in table_data"> 
 
     <h1>{{dta_key}}</h1> 
 
     <table > 
 
     <thead> 
 
      <tr> 
 
      <th ng-repeat="thead in dta_value.titleList">{{thead}}</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="tbody in dta_value.dataList"> 
 
      <td ng-repeat="trow in tbody">{{trow}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-07-04 07:32:11

如何在angularjs中安排JSON值？

回答

相關問題