如何将 json 渲染为 DOM 中的元素？答案

【问题标题】：How to render json as elements in the DOM?如何将 json 渲染为 DOM 中的元素？
【发布时间】：2015-09-17 08:33:17
【问题描述】：

我有一个动态表，我在其中显示一些数据，这些数据的 90% 只是文本，但 10% 是元素。正如您在下面看到的，有一个附有一些 json 的表。例如，json 显示"element_type": ["WAGER_ACTION_BUTTON"] 我需要显示一个按钮，而在另一种情况下，...:"BASIC_CHECKBOX" 然后我需要显示一个复选框。

所以，表格的标题是FILL OPEN，这意味着我需要在那里显示一个按钮。在底部查看 json 对象

这是桌子

  <table>
        <thead>
          <tr>
            <th ng-repeat="column in cols"
                ng-init="isXX = column.indexOf('XX') === 0">
              <span ng-if="isXX">{{column.substring(3).replace('_', ' ')}}</span>
              <span ng-if="!isXX">{{column}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rows">
            <td ng-repeat="column in cols">
              <span>{{row[column]}}</span>
            </td>
          </tr>
        </tbody>
      </table>

这里是 Angular 部分中的代码

    ReportsFactory.pendingBets(reportParam).then(function(data) {
      if (data.length) {
        gridInfo = _.forEach(data, function(item) {return item;});
        $scope.rows = gridInfo;
        $scope.cols = Object.keys($scope.rows[0]);
      }
    }

这是我从后端收到的 json 对象

  {
    "BET": 57630343,
    "CUSTOMER": 181645,
    "SPORT": "MLB",
    "XX_FILL OPEN": {
      "element": {
        "element_type": [
          "WAGER_ACTION_BUTTON"
        ],
        "element_call": [
          "fillOpen(57630343)"
        ],
        "element_content": [
          ""
        ]
      }
    },
    "XX_VIEW": null,
    "XX_CANCEL": {
      "element": {
        "element_type": [
          "BASIC_CHECKBOX"
        ],
        "element_call": [
          ""
        ],
        "element_content": [
          "0"
        ]
      }
    }
  }

所以每当你看到一个以XX_ 开头的道具时，就意味着一个元素。

在上面你看到的这个json中，对象键：BET，CUSTOMER，SPORT，XX_FILL_OPEN，XX_VIEW和XX_CANCEL，是表的标题，我在这里重复我自己：每次一个prop以XX_开头，那应该是一个元素，但我需要弄清楚它是什么类型的元素，以便在 DOM 中显示它。

【问题讨论】：

我更喜欢为表单元素制作指令

标签： javascript angularjs

【解决方案1】：

我会创建一个自定义指令。
通过隔离作用域将 json 对象的元素部分传递给指令。
让链接函数创建新元素
通过transclude插入新元素

另一种解决方案是通过 ngSwitch 使用 switch 语句 https://docs.angularjs.org/api/ng/directive/ngSwitch

鉴于您在上面拥有的数据，您可以通过多种方式打开它，您可以打开 cols 值，也可以打开 rows 对象中的元素类型。这是两种方法的示例

http://embed.plnkr.co/ySJeKeC95rIp4LZCxl68/preview

请注意，也可以打开数组和对象的键以及值，但在 ng-repeat 中使用此语法。

//to switch on value 
<div  ng-repeat="(key, value) in bars">
    <div ng-switch ="value">
        <button ng-switch-when="foo" >foo Button</button>
         <input  ng-switch-when="bas" type="checkbox" />
    </div>
</div>

//to switch on key 
<div  ng-repeat="(key, value) in bars">
    <div ng-switch ="key">
        <button ng-switch-when="foo" >foo Button</button>
         <input  ng-switch-when="bas" type="checkbox" />
    </div>
</div>

【讨论】：

如何根据我在问题中发布的 json 使用这个 ng-switch ？
最多大约 3 或 4 个。

【解决方案2】：

您可以检查“列”的值并使用 ng-switch（如果列名都是已知的）或 ng-if。如果我理解正确，这里有两个实现：

使用 ng-switch：

<div ng-switch="column">
    <button ng-switch-when="XX_FILL OPEN" >Test Button</button>
    <input ng-switch-when="XX_CANCEL" type="checkbox" />
    <span ng-switch-default>{{row[column]}}</span>
</div>

http://jsfiddle.net/16L31dmm/2/

使用 ng-if:

<td ng-repeat="column in cols">
    <span ng-if="column.indexOf('XX') < 0">{{row[column]}}</span>
    <button ng-if="column.indexOf('FILL OPEN') >= 0" >Test Button</button>
    <input ng-if="column.indexOf('CANCEL') >= 0" type="checkbox" />
</td>

http://jsfiddle.net/16L31dmm/3/

【讨论】：