Javascript 如何在DOM中将json呈现为元素？

我有一个动态表，其中显示了一些数据，90%的数据只是文本，而10%是元素。正如您在下面看到的，有一个附加了一些json的表。例如，如果json显示

“element\u type”：[“WAGER\u ACTION\u BUTTON”]

我需要显示一个按钮，而在另一种情况下，则显示

…：“BASIC\u CHECKBOX”

然后我需要显示一个复选框

因此，表格的标题是

填充打开

，这意味着我需要在那里显示一个按钮。请参见底部的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>

下面是我从后端接收到的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\ux

开头的道具，都意味着一个元素

在上面看到的这个json中，对象键：BET、CUSTOMER、SPORT、XX_FILL_OPEN、XX_VIEW和XX_CANCEL是表的标题，我在这里重复一下：每次一个道具在开始时带有

XX_

，这应该是一个元素，但我需要弄清楚它是什么类型的元素，以便在DOM中显示它

我将创建一个自定义指令

通过隔离作用域将json对象的元素部分传递给指令

让link函数创建新元素

通过transclude插入新元素

另一个解决方案是通过ngSwitch使用switch语句

根据上面的数据，有几种方法可以打开它，可以打开cols值，也可以打开rows对象中的元素类型。下面是两种方法的一个示例

请注意，也可以打开数组和对象的键以及值，但在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>

//打开值
foo按钮
//打开钥匙
foo按钮

您可以检查“column”的值，并使用ng开关（如果列名都已知）或ng if。 如果我理解正确，以下是两种实现：

带ng开关：

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

测试按钮
{{行[列]}}

如果：

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

{{行[列]}}
测试按钮

---

我更喜欢对form elementshow发出指令，我可以根据我在问题中发布的json使用这个ng开关吗？最多3或4个左右。

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