如何使用angularjs将对象显示到表中

发布时间：2020-12-17 17:14:26 所属栏目：安全来源：网络整理

导读：我有这样的对象数据： var details = { 3:{ 2015-3-17 : 1,2015-3-18 : 0,routelines: "PASAY - CAGAYAN",tripcode: 3 },4:{ 2015-3-17 : 0 2015-3-18 : 4 routelines: "PASAY - CAVITE",tripcode:4 },} 现在我打算在表格中显示它们,但我不知道如何开始,因为

我有这样的对象数据：

var details = {  
            3:{
               2015-3-17 : 1,2015-3-18 : 0,routelines: "PASAY - CAGAYAN",tripcode: 3
              },4:{ 
               2015-3-17 : 0
               2015-3-18 : 4
               routelines: "PASAY - CAVITE",tripcode:4        
              },}

现在我打算在表格中显示它们,但我不知道如何开始,因为它们都是对象.我想实现看起来像这样的输出：

tripcode |路线| 2015-3-17 | 2015年3月18日|
?????3 | PASAY – CAGAYAN | 1 | 0 |
?????4 | PASAY – CAVITE | 0 | 4 |

有人知道怎么做吗？
我试过这个,但遗憾的是它不起作用.

<div ng-repeat="detail in details">
  <div ng-repeat="(key,value) in detail">
      {{key}} : {{value}}
  </div>
</div>

解决方法

确保正确格式化数据对象,某些键缺少引号.还应将详细信息绑定到$scope.

试试这个：

function MyCtrl($scope) {
    
    $scope.details = {
        '3': {
            tripcode: 3,'2015 - 3 - 17': 1,'2015 - 3 - 18': 0
        },'4': {
           tripcode: 4,routelines: "PASAY - CAVITE",'2015 - 3 - 17': 0,'2015 - 3 - 18': 4
        },};
    
}

.header,.items {
 border-bottom: 1px solid #000;
 width: 600px;
}

.header span,.items span {
    display: inline-block;
    width: 120px;
    border-right: 1px solid #000;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyCtrl">
        <div ng-repeat="detail in details">
            <div class="header" ng-show="$index == 0">
                <span ng-repeat="(key,value) in detail">{{key}}</span>
            </div>
            <div class="items">
                <span ng-repeat="(key,value) in detail">{{value}}</span>
            </div>
        </div>
    </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!