Можно ли динамически создавать HTML-шаблоны с AngularJS?

Question

Я новичок в 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 входных тега, необходимых рядом с вопросом.

Для QurationType = C означает = Это может быть либо радио, либо флажки.но для Radio или Checkbox значение будет получено из базы данных.

Пожалуйста, объясните мне, как приступить к решению этой динамической проблемы.Я никогда не имел дело с генерацией динамического HTML-контента с помощью angularJS.

Можно ли построить таблицу с помощью 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>

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

Новая демоверсия