在Angularjs中显示复杂的json

Question

我想用bollean值，字符串甚至是数组来显示复杂的json。我怎样才能做到这一点？

$scope.options = {    
    "option_1" : "some string",    
    "option_2" : true,
    "option_3" : [1.123456789, 0.123548912, -7.156248965],
    "option_4" : null,    
    "option_5" : [1234.45678, 75.142012] 
} 

我使用的是这样的东西：但我对数组有问题：

<ul ng-repeat="(key, value) in options">     
    <li>{{key}}</li>     
    <span>{{value}}</span> 
</ul> 

我想在适当的键下显示类似于标题和值的表格的表格，如下所示：

option_1     option_2    option_3       ... 
some string  true        1.123456789                          
                         0.123548912                         
                        -7.156248965

Answer 1

应该是这样的。

app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.isArray = angular.isArray;
  $scope.options = {
    "option_1": "some string",
    "option_2": true,
    "option_3": [1.123456789, 0.123548912, -7.156248965],
    "option_4": null,
    "option_5": [1234.45678, 75.142012]
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th ng-repeat="(key, value) in options">
            {{ key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="(key, value) in options">
            {{isArray(value) ? '': value}}
            <table ng-if="isArray(value)">
              <tr ng-repeat="v in value">
                <td>
                  {{v}}
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</div>