javascript - 如何在 Bootstrap 表中的另一个数组中显示 json

Question

我必须在 bootstrap 表中获取以下 JSON 数据。我可以显示一级数据，但我不知道如何在 bootstrap 表中的 array 数据中显示 array。

[
    {
        "seriesName": "Indian Bank",
        "dataVlaues": {
            "11/12/2017": 50,
            "11/13/2017": 40,
            "11/14/2017": 60,
            "11/11/2017": 100
        }
    },
    {
        "seriesName": "Indian Bank1",
        "dataVlaues": {
            "11/18/2017": 12,
            "11/17/2017": 27,
            "11/16/2017": 30,
            "11/15/2017": 101
        }
    }
]

Answer 1

请在下面找到可行的解决方案，尽情享受:)

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {

    $scope.userTypes = [{
      "type": 'Parent',
      "options": {
        "option1": "11QWERT",
        "option2": "22QWERT"
      }
    }, {
      "type": 'Parent1',
      "options": {
        "option22": "11QWERT",
        "option222": "22QWERT"
      }
    }];
  })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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-bordered">
      <thead>
        <tr>
          <th>Type</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="user in userTypes">
          <td>{{user.type}}</td>
          <td>
            <button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
              Show
            </button>
          </td>
        </tr>
        <tr ng-repeat-end ng-if="showOptions">
          <td colspan="2">
            <table class="table table-bordered">
              <tbody>
                <tr ng-repeat="(key, val) in user.options">
                  <td>{{key}}</td>
                  <td>{{val}}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>