Ionic v1（Angular 1.x）项目实现管理员向成员提问的动态表单

嘿，针对你这个Ionic v1（Angular 1.x）旧项目里的动态群组提问需求，我整理了一套完整的落地方案，完全适配你的技术栈，一起来拆解实现吧！

1. 先对齐数据结构（匹配你提到的Hash存储） #

首先咱们把管理员创建的问题结构明确下来，用你说的Hash格式存储，每个问题包含唯一ID、问题文本、类型、必填规则，带选项的问题额外加选项数组：

$scope.groupQuestions = {
  q1: {
    id: "q1",
    q: "你是否同意群组规则？",
    type: "YN", // Yes/No类型，对应toggle控件
    required: true
  },
  q2: {
    id: "q2",
    q: "你的专属昵称是什么？",
    type: "S", // String类型，对应文本输入框
    required: true
  },
  q3: {
    id: "q3",
    q: "你所在的城市是？",
    type: "OPTIONS", // 带选项类型，对应下拉框
    options: ["北京", "上海", "广州", "深圳"],
    required: false
  }
};

2. 动态表单的Ionic模板实现 #

利用Angular的ng-repeat遍历Hash对象，根据问题类型渲染对应的控件，同时处理表单验证：

<ion-view title="群组专属提问">
  <ion-content class="padding">
    <form name="questionForm" ng-submit="submitAnswers()">
      <!-- 循环渲染所有问题 -->
      <div ng-repeat="(key, question) in groupQuestions" class="list margin-bottom-20">
        <label class="item item-input item-stacked-label">
          <span class="input-label">
            {{question.q}}
            <!-- 必填标记 -->
            <span ng-if="question.required" class="assertive">*</span>
          </span>

          <!-- Yes/No Toggle控件 -->
          <ion-toggle 
            ng-if="question.type === 'YN'" 
            ng-model="userAnswers[question.id]"
            ng-required="question.required">
            {{userAnswers[question.id] ? '同意' : '不同意'}}
          </ion-toggle>

          <!-- 文本输入框 -->
          <input 
            ng-if="question.type === 'S'" 
            type="text" 
            ng-model="userAnswers[question.id]"
            ng-required="question.required"
            placeholder="请输入你的回答">

          <!-- 下拉选择框 -->
          <select 
            ng-if="question.type === 'OPTIONS'" 
            ng-model="userAnswers[question.id]"
            ng-required="question.required">
            <option value="">请选择</option>
            <option ng-repeat="opt in question.options" value="{{opt}}">{{opt}}</option>
          </select>
        </label>
      </div>

      <!-- 提交按钮：表单验证不通过时禁用 -->
      <button 
        class="button button-block button-positive" 
        ng-disabled="questionForm.$invalid">
        提交我的回答
      </button>
    </form>
  </ion-content>
</ion-view>

3. 控制器核心逻辑 #

在Angular控制器里初始化数据、处理用户回答绑定和提交逻辑，兼容Ionic的交互组件：

angular.module('yourAppModule')
.controller('GroupQuestionCtrl', function($scope, $ionicPopup, GroupApiService) {
  // 从后端拉取管理员预设的群组问题（这里模拟本地数据，实际替换为API请求）
  $scope.groupQuestions = {
    q1: {id: "q1", q: "你是否同意群组规则？", type: "YN", required: true},
    q2: {id: "q2", q: "你的专属昵称是什么？", type: "S", required: true},
    q3: {id: "q3", q: "你所在的城市是？", type: "OPTIONS", options: ["北京", "上海", "广州", "深圳"], required: false}
  };

  // 存储用户回答的对象，键为问题ID，值为用户输入/选择的内容
  $scope.userAnswers = {};

  // 初始化：给Yes/No类型问题设置默认值（避免toggle控件初始无状态）
  angular.forEach($scope.groupQuestions, function(question) {
    if (question.type === 'YN') {
      $scope.userAnswers[question.id] = false;
    }
  });

  // 提交回答的处理函数
  $scope.submitAnswers = function() {
    // 调用后端API提交回答，传入群组ID、用户ID和回答对象
    GroupApiService.saveAnswers({
      groupId: '当前群组ID',
      userId: '当前用户ID',
      answers: $scope.userAnswers
    }).then(function(res) {
      // 提交成功后的提示与重置
      $ionicPopup.alert({
        title: '提交成功',
        template: '你的回答已同步给群组管理员！'
      }).then(function() {
        // 重置表单状态
        $scope.userAnswers = {};
        angular.forEach($scope.groupQuestions, function(question) {
          if (question.type === 'YN') {
            $scope.userAnswers[question.id] = false;
          }
        });
      });
    }).catch(function(err) {
      $ionicPopup.alert({
        title: '提交失败',
        template: '请稍后重试'
      });
    });
  };
});

4. 后端交互补充（可选） #

如果需要持久化存储问题和回答，后端可以接收以下格式的数据：

• 管理员创建问题的请求体：

{
  groupId: "group_123",
  questions: {
    q1: {q: "你是否同意群组规则？", type: "YN", required: true},
    // ...其他问题
  }
}

• 成员提交回答的请求体：

{
  groupId: "group_123",
  userId: "user_456",
  answers: {
    q1: true,
    q2: "小橙子",
    q3: "广州"
  }
}

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