如何在bootstrap表中的另一个数组中显示json

时间:2017-11-17 09:12:41

标签: javascript angularjs bootstrap-4

我必须在create or replace procedure arrange_items( ITEM_CODES in T_STRINGARRAY, PARENT in VARCHAR2 ) as V_SEQS T_NUMBERARRAY := T_NUMBERARRAY(); i pls_integer; mx number; begin -- calculat max: select max(seq) into mx from MENU_ITEMS; -- Add max(SEQ) update MENU_ITEMS set SEQ = SEQ + mx+1 where PARENT_CODE = PARENT; -- then your stuff works for i in 1..ITEM_CODES.count loop V_SEQS.extend(); V_SEQS(i) := i; end loop; forall i in 1..ITEM_CODES.count update MENU_ITEMS set SEQ = V_SEQS(i) where ITEM_CODE = ITEM_CODES(i) and PARENT_CODE = PARENT; end arrange_items; / 表中使用以下JSON数据。我可以显示单级数据,但我不知道如何在bootstrap表中的array数据中显示array

bootstrap

2 个答案:

答案 0 :(得分:2)

请在下方找到工作方案,享受:)

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>

答案 1 :(得分:1)

请查看此jsfiddle链接

https://jsfiddle.net/lalitSachdeva1/0xb732e1/1/

我已将ul li更新为表格式结构; 您的js将保持不变,此处的关键概念为ng-repeat-startng-repeat-end

<div ng-app="myApp">
    <div ng-controller="myCtrl">
      <table>
    <thead>
        <tr>
            <td>parent</td>
            <td>option1</td>
            <td>option2</td>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="user in userTypes">
            <td>{{user.type}}</td>
            <td ng-repeat-start="(key,value) in user.options">{{key}}</td>
            <td ng-repeat-end="(key,value) in user.options">{{value}}</td>
        </tr>
    </tbody>
</table>
    </div>
</div>