如何在AngularJS中用ng-model和ng-repeat将对象列表存入模型

嗨，我来帮你搞定这个AngularJS的绑定问题！不用jQuery也能轻松实现，而且这才是AngularJS数据驱动视图的正确打开方式～

核心思路：用数组存储表单字段配置，直接绑定ng-model #

AngularJS的ng-repeat会为每一项创建独立的作用域，我们只需要把每个输入框的ng-model直接绑定到数组元素的属性上，就能自动同步用户输入的数据，完全不用手动操作DOM。

第一步：在控制器里初始化表单数据数组

先定义一个包含所有输入字段配置的数组，每个字段对象可以包含标签、字段名、默认值等信息，方便后续整理POST数据：

// 假设你的Angular模块是这样定义的
var app = angular.module('yourApp', []);

app.controller('FormController', function($scope) {
  // 初始化表单字段数组，每个对象对应一个输入框
  $scope.formFields = [
    { label: "用户名", fieldName: "username", value: "" },
    { label: "邮箱地址", fieldName: "email", value: "" },
    { label: "联系电话", fieldName: "phone", value: "" },
    { label: "备注信息", fieldName: "remark", value: "" }
    // 可以根据需求添加更多字段
  ];

  // 处理POST提交的函数
  $scope.submitForm = function() {
    // 把formFields里的数据整理成后端需要的对象
    const postData = {};
    $scope.formFields.forEach(field => {
      postData[field.fieldName] = field.value;
    });

    // 这里就可以用postData发起POST请求了
    console.log("准备提交的数据：", postData);
    // 示例：用Angular的$http服务发送请求
    // $http.post('/api/submit', postData)
    //   .then(res => { /* 处理成功响应 */ })
    //   .catch(err => { /* 处理错误 */ });
  };
});

第二步：在HTML里用ng-repeat渲染输入框并绑定模型

直接遍历formFields数组，把每个输入框的ng-model绑定到field.value，这样用户输入的内容会自动同步到控制器的数组中：

<div ng-app="yourApp" ng-controller="FormController">
  <div ng-repeat="field in formFields" class="form-item">
    <label>{{ field.label }}</label>
    <input 
      type="text" 
      ng-model="field.value" 
      placeholder="请输入{{ field.label }}"
    >
  </div>

  <button ng-click="submitForm()" class="submit-btn">提交表单</button>
</div>

进阶：支持不同类型的输入控件

如果你的表单包含单选框、复选框或下拉框，只需要在字段对象里加个type属性，就能动态渲染对应的控件：

// 扩展字段配置，支持多种输入类型
$scope.formFields = [
  { label: "用户名", fieldName: "username", type: "text", value: "" },
  { label: "性别", fieldName: "gender", type: "radio", options: ["男", "女"], value: "男" },
  { label: "兴趣爱好", fieldName: "hobbies", type: "checkbox", options: ["篮球", "音乐", "编程"], value: [] },
  { label: "所在城市", fieldName: "city", type: "select", options: ["北京", "上海", "广州"], value: "北京" }
];

对应的HTML可以这样写：

<div ng-repeat="field in formFields" class="form-item">
  <label>{{ field.label }}</label>

  <!-- 文本输入框 -->
  <input ng-if="field.type === 'text'" type="text" ng-model="field.value">

  <!-- 单选按钮 -->
  <div ng-if="field.type === 'radio'">
    <label ng-repeat="opt in field.options">
      <input type="radio" ng-model="field.value" value="{{ opt }}"> {{ opt }}
    </label>
  </div>

  <!-- 复选框 -->
  <div ng-if="field.type === 'checkbox'">
    <label ng-repeat="opt in field.options">
      <input type="checkbox" ng-model="field.value" ng-value="opt"> {{ opt }}
    </label>
  </div>

  <!-- 下拉选择框 -->
  <select ng-if="field.type === 'select'" ng-model="field.value">
    <option ng-repeat="opt in field.options" value="{{ opt }}">{{ opt }}</option>
  </select>
</div>

这种方式完全遵循AngularJS的MVVM思想，数据和视图自动同步，不用手动操作DOM，比用jQuery获取动态ID的方法优雅太多啦！

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