Question

我是AngularJS的新手。我有一个项目，必须根据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):

这里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" />

Answer 1

此答案可能不适用于新用户，正如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);   
  }

几件重要的事情要记住

您可以使用ng-repeat来增加所需的输入标签
您可以使用ng-if指令在不同情况下显示不同的html
创建一个最小，完整和可验证的示例可以使其他人快速了解您的工作，从而更好地帮助您解决问题。您可能要看看下面的页面。 https://stackoverflow.com/help/mcve

Demo

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

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

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

1 个答案: