可以用AngularJS动态构建HTML模板吗？

mmvthczy 于 2023-11-16 发布在 Angular

关注(0)|答案(1)|浏览(136)

我有一个项目，我必须根据SQL Server存储过程中的值动态构建表模板。
我有以下记录

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

字符串
在这里，Type = E表示build <input tag ResponseCount = 1表示问题旁边只有一个input tag。
但ReponseCount = 4意味着我需要4个输入标签需要旁边的问题。
对于QuustionType = 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

来源：https://stackoverflow.com/questions/55431738/is-it-possible-to-build-html-template-dynamically-with-angularjs

1条答案

按热度按时间

bbmckpt71#

正如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根据需要增加输入标记的折痕
1.您可以使用ng-if指令来显示不同情况下的不同html

Demo

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

型

New Demo

赞(0）回复(0）举报 2023-11-16

我来回答

可以用AngularJS动态构建HTML模板吗？

1条答案

相关问题

热门标签

最新问答