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