时间戳

首页 > 解决方案 > 是否可以使用 AngularJS 动态构建 HTML 模板？

angularjs - 是否可以使用 AngularJS 动态构建 HTML 模板？

问题描述

我是 AngularJS 的新手。我有一个项目，我必须根据 SQL 服务器存储过程中的值动态构建表模板。

我有以下记录

QuestD  QuestionType ResponseCount    Question  

2806     E             1              Organization Name: 
2807     E             1              Contact Name: 
2808     E             4              Rider Name:

2815     C             1              Date Requested (Radio Button): 
2816     C             4              Event Selected (Checkbox):

这里 QuestionType = E 表示构建

但 ReponseCount = 4 意味着我需要在问题旁边需要 4 个输入标签。

对于 QustionType = C 表示 = 它可以是 Radio 或 Checkboxes。但对于 Radio 或 Checkbox，值将来自数据库。

请指导我如何着手解决这个动态问题。我从未处理过使用 angularJS 生成动态 HTML 内容。

是否可以使用 angularJS 构建表格？

提前致谢。

 [
  { 
    "QuestinID": 2806,
    "QuestionType": "E",
    "ResponseCount": 1,
    "Question": "Organization Name:"
  },

  {
    "QuestinID": 2807,
    "QuestionType": "E",
    "ResponseCount": 1,
    "Question": "Contact Name: "
  },

  {
    "QuestinID": 2804,
    "QuestionType": "E",
    "ResponseCount": 4,
    "Question": "Rider Name:"
  },

  {
    "QuestinID": 2805,
    "QuestionType": "C",
    "ResponseCount": 1,
    "Question": "Mobility or Other Challenges?"
  },

  {
    "QuestinID": 2815,
    "QuestionType": "C",
    "ResponseCount": 1,
    "Question": "Date Requested:"
  },

  {
    "QuestinID": 2816,
    "QuestionType": "C",
    "ResponseCount": 4,
    "Question": "Event Selected:"
  }
]

对于所选日期：

[ '01-JAN-2019', '02-JAN-2019', '03-JAN-2019', '03-JAN-2019' ]

对于选定的事件：

[ 'Event1','Event2','Event3','Event4']

谢谢

在此处输入图像描述

我想看看

<label>Rider 1:</label>
<input type="text" ng-model="item.rider1" /> <br /> 
<label>Rider 2:</label>
<input type="text" ng-model="item.rider2" /> <br /> 
<label>Rider 3:</label>
<input type="text" ng-model="item.rider3" /> <br /> 
<label>Rider 4:</label>
<input type="text" ng-model="item.rider4" />

标签： angularjs

解决方案

正如 georgeawg 在评论中所说，这个答案可能不适合新用户：

应该避免在 AngularJS 表达式中使用函数调用，因为这些函数在每个摘要循环中被多次调用

像这样的东西应该对你有用

html

<table ng-repeat="item in data">
  <tr>
    <td colspan="4">
      {{item.Question}}
    </td>
  </tr>
  <tr ng-if="item.QuestionType == 'E'">
    <td ng-repeat="response in getArray(item.ResponseCount) track by $index">
      <input />
    </td>
  </tr>
  <tr ng-if="item.QuestionType == 'C'">
    <td ng-repeat="response in getArray(item.ResponseCount) track by $index">
      <input type="checkbox"/>
    </td>
  </tr>
</table>

js

  $scope.getArray = function(num) {
      return new Array(num);   
  }

几件重要的事情要记住

  1. 您可以使用 ng-repeat 根据需要折叠尽可能多的输入标签
  2. 您可以使用 ng-if 指令针对不同的情况显示不同的 html
  3. 创建一个最小的、完整的和可验证的示例可以让其他人快速了解您在做什么，从而更好地帮助您解决问题。您可能想查看以下页面。https://stackoverflow.com/help/mcve

演示

根据评论中的 georgeawgs 建议改进了答案。

js

  //prepare data in controll
  angular.forEach($scope.data, function(value, key) {
      var responseArray = [];
      
      for(i = 0; i< value.ResponseCount; i++){
          var responseData = {};
          responseArray.push(responseData);
      }
      
      value.ResponseArray = responseArray;    
  });

html

<table ng-repeat="item in data">
    <tr>
      <td colspan="4">
        {{item.Question}}
      </td>
    </tr>
    <tr ng-if="item.QuestionType == 'E'">
      <td ng-repeat="response in item.ResponseArray track by $index">
        <input ng-model="response.data" />
      </td>
    </tr>
    <tr ng-if="item.QuestionType == 'C'">
      <td ng-repeat="response in item.ResponseArray track by $index">
        <input ng-model="response.data" type="checkbox"/>
      </td>
    </tr>
</table>

新演示

推荐阅读