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

Question

我有一个动态表，在其中显示一些数据，其中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是表的标题，我在这里重复我的意思：每当道具以XX_开头时，都应该是元素，但我需要弄清楚哪种元素才能在DOM中显示。

Answer 1

1. 我将创建一个自定义指令。
2. 通过隔离范围将json对象的元素部分传递给指令。
3. 具有链接功能创建新元素

4. 通过transclude插入新元素

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

给定上面的数据，有几种方法可以打开它，可以只打开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>

Answer 2

您可以检查“ column”的值，并使用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/