如何在AngularJS中创建动态多字段？现有代码求助

我帮你把动态多字段的功能完善好了，包含完整的控制器代码和对应的HTML模板，还会拆解关键逻辑让你明白每个部分的作用：

完整的控制器JS代码 #

angular.module('myApp', [])
.controller('MyController', function($scope) {
    // 初始化动态字段数组，每个元素包含a、b两个空字段
    $scope.commonData = [{ 'a': '', 'b': '' }];

    // 表单提交处理函数
    $scope.submitCommonData = function(event) {
        // 阻止表单默认跳转行为
        event.preventDefault();
        // 打印所有动态字段的数据，你可以在这里对接后端接口或者做其他处理
        console.log('提交的所有数据:', $scope.commonData);
    };

    // 添加新的字段组
    $scope.addNewData = function() {
        // 往数组里push一个新的空对象，触发视图更新
        $scope.commonData.push({ 'a': '', 'b': '' });
    };

    // 删除指定的字段组
    $scope.removeCommonData = function(index) {
        // 可选：如果想至少保留一组字段，就加这个判断
        // if ($scope.commonData.length > 1) {
            $scope.commonData.splice(index, 1);
        // }
    };
});

对应的HTML模板 #

<div ng-app="myApp" ng-controller="MyController">
    <form ng-submit="submitCommonData($event)">
        <!-- 循环渲染每一组动态字段 -->
        <div ng-repeat="item in commonData track by $index" style="margin: 10px 0;">
            <h4>字段组 {{$index + 1}}</h4>
            <input 
                type="text" 
                ng-model="item.a" 
                placeholder="请输入字段A的值"
                style="margin-right: 10px;"
            >
            <input 
                type="text" 
                ng-model="item.b" 
                placeholder="请输入字段B的值"
                style="margin-right: 10px;"
            >
            <!-- 删除按钮，点击时传入当前字段组的索引 -->
            <button 
                type="button" 
                ng-click="removeCommonData($index)"
                ng-disabled="commonData.length === 1"
            >
                删除这一组
            </button>
        </div>

        <!-- 添加新字段组的按钮 -->
        <button type="button" ng-click="addNewData()" style="margin-right: 10px;">
            添加新字段组
        </button>

        <!-- 表单提交按钮 -->
        <button type="submit">提交所有数据</button>
    </form>
</div>

关键逻辑说明 #

• 动态渲染字段：用ng-repeat="item in commonData track by $index"遍历数组，每个数组元素对应一组输入框，track by $index是为了避免数组里有重复空对象时出现渲染报错的问题。
• 双向数据绑定：每个输入框通过ng-model="item.a"和ng-model="item.b"绑定到数组元素的属性，你输入的内容会自动同步到$scope.commonData里，不用手动收集数据。
• 添加功能：点击“添加新字段组”按钮时，addNewData函数会往数组里塞一个新的空对象，AngularJS会自动触发视图更新，新增一组输入框。
• 删除功能：点击“删除这一组”按钮时，会把当前字段组的索引传给removeCommonData函数，用splice方法从数组中删掉对应的元素，视图也会跟着更新。我还加了ng-disabled，当只剩一组字段时按钮会变灰不能点，避免把所有字段都删光（你可以根据需求去掉这个限制）。
• 表单提交：通过ng-submit绑定提交函数，先阻止默认的表单跳转，然后直接拿$scope.commonData就能得到所有动态字段的输入值，非常方便。

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