如何用AngularJS基于SQL存储过程动态构建表单模板？

Absolutely you can build this dynamic form with AngularJS! It’s actually one of the framework’s core strengths for rendering UI that adapts to backend data like your stored procedure results. Let’s break down how to implement this step by step.

Step 1: Organize Your Data in the Controller #

First, let’s take your stored procedure data (fixing that tiny typo QuestinID → QuestionID) and load it into an AngularJS controller, along with the options for your C type questions:

angular.module('dynamicFormApp', [])
.controller('FormController', function($scope) {
  // Data fetched from your SQL Server stored procedure
  $scope.questions = [
    { "QuestionID": 2806, "QuestionType": "E", "ResponseCount": 1, "Question": "Organization Name:" },
    { "QuestionID": 2807, "QuestionType": "E", "ResponseCount": 1, "Question": "Contact Name: " },
    { "QuestionID": 2804, "QuestionType": "E", "ResponseCount": 4, "Question": "Rider Name:" },
    { "QuestionID": 2805, "QuestionType": "C", "ResponseCount": 1, "Question": "Mobility or Other Challenges?" },
    { "QuestionID": 2815, "QuestionType": "C", "ResponseCount": 1, "Question": "Date Requested:" },
    { "QuestionID": 2816, "QuestionType": "C", "ResponseCount": 4, "Question": "Event Selected:" }
  ];

  // Map options to each C-type question using QuestionID as the key
  $scope.questionOptions = {
    2815: ['01-JAN-2019', '02-JAN-2019', '03-JAN-2019', '03-JAN-2019'],
    2816: ['Event1','Event2','Event3','Event4'],
    2805: ['Yes', 'No'] // Add your actual options for this question here
  };

  // Object to store all user responses
  $scope.formResponses = {};
});

Step 2: Build the Dynamic HTML Template #

Now use AngularJS directives like ng-repeat, ng-if, and ng-model to render the form based on your data. We’ll split logic for E (text inputs) and C (radio/checkbox) types:

<div ng-app="dynamicFormApp" ng-controller="FormController">
  <form>
    <!-- Loop through each question from the stored procedure -->
    <div ng-repeat="question in questions" class="form-group">
      <strong>{{ question.Question }}</strong>

      <!-- Handle QuestionType = E (Text Input Fields) -->
      <div ng-if="question.QuestionType === 'E'">
        <!-- Generate N input fields based on ResponseCount -->
        <div ng-repeat="n in [].constructor(question.ResponseCount) track by $index">
          <label ng-if="question.ResponseCount > 1">
            {{ question.Question.split(':')[0] }} {{ $index + 1 }}:
          </label>
          <input 
            type="text" 
            ng-model="formResponses['q' + question.QuestionID + '_' + ($index + 1)]" 
            class="form-control"
          />
          <br>
        </div>
      </div>

      <!-- Handle QuestionType = C (Radio/Checkbox Buttons) -->
      <div ng-if="question.QuestionType === 'C'">
        <!-- Radio buttons for single selection (ResponseCount = 1) -->
        <div ng-if="question.ResponseCount === 1">
          <label ng-repeat="option in questionOptions[question.QuestionID]">
            <input 
              type="radio" 
              ng-model="formResponses['q' + question.QuestionID]" 
              value="{{ option }}"
            > {{ option }}
            <br>
          </label>
        </div>

        <!-- Checkboxes for multiple selection (ResponseCount > 1) -->
        <div ng-if="question.ResponseCount > 1">
          <label ng-repeat="option in questionOptions[question.QuestionID]">
            <input 
              type="checkbox" 
              ng-model="formResponses['q' + question.QuestionID][option]" 
            > {{ option }}
            <br>
          </label>
        </div>
      </div>
    </div>

    <!-- Optional: Button to view responses in console -->
    <button type="button" ng-click="console.log(formResponses)">View Form Responses</button>
  </form>
</div>

Key Details to Understand #

• Dynamic Model Names: We use formResponses['q' + question.QuestionID + '_' + ($index + 1)] to create unique ng-model values (e.g., q2804_1 for the first Rider Name input). This makes it easy to collect and submit all responses later.
• Generating Input Counts: The [].constructor(question.ResponseCount) track by $index trick creates a temporary array of the exact length needed to loop through and generate the right number of input fields.
• Radio vs Checkbox: We check ResponseCount for C type questions to switch between single-selection radio buttons and multi-selection checkboxes.
• Options Mapping: Using questionOptions[question.QuestionID] keeps your options organized and tied directly to the correct question.

What You’ll See #

When you run this code, you’ll get:

• Single text inputs for Organization Name and Contact Name
• 4 labeled text inputs (Rider 1 to Rider 4)
• Radio buttons for Mobility Challenges and Date Requested
• Checkboxes for Event Selected

All user inputs will be stored in the formResponses object, which you can easily send back to your backend (via an HTTP POST) to save to SQL Server.

内容的提问来源于stack exchange，提问作者Alomoni