AngularJS表单提交记录表格代码异常，请求修复使其正常运行

原代码存在的问题 #

• HTML标签语法错误：<div ng-controller="tableCtrl" 未闭合，缺少>
• 控制器作用域冲突：表单在myCtrl作用域下，提交方法addRow定义在子控制器tableCtrl中，父作用域无法调用；子控制器也无法直接获取父作用域的表单数据
• 初始化逻辑错误：控制器初始化时直接访问未渲染完成的DOM元素myForm.fname.value，会导致引用报错
• 数据共享问题：子控制器的records数组无法与父控制器的表单数据正确关联

修复后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" ng-submit="addRow()"> 
        First Name: <input type="text" name="fname" ng-model="firstName"><br>
        Last Name: <input type="text" name="lname" ng-model="lastName"><br> 
        Submit: <input type="submit" value="Submit"><br>
    </form> 
    <p> Full Name: {{fullName()}}</p> 
    <div>
        <table> 
            <tr> 
                <th>First Name</th> 
                <th>Last Name</th> 
            </tr> 
            <tr ng-repeat="x in records"> 
                <td>{{x.firstName}}</td>
                <td>{{x.lastName}}</td>
            </tr> 
        </table> 
    </div> 
<script> 
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) { 
        $scope.records = [];
        $scope.fullName = function() { 
            return ($scope.firstName || '') + " " + ($scope.lastName || ''); 
        }; 
        $scope.addRow = function() { 
            $scope.records.push({ 
                'firstName': $scope.firstName, 
                'lastName': $scope.lastName 
            });
            // 可选：提交后清空表单
            $scope.firstName = '';
            $scope.lastName = '';
        };
    });
</script>

修改说明 #

1. 合并控制器：将tableCtrl的逻辑合并到myCtrl中，统一作用域，避免跨控制器的数据和方法调用问题
2. 修复HTML语法：补全未闭合的标签，同时因控制器合并移除了冗余的ng-controller属性
3. 移除错误初始化：删除直接访问DOM元素的代码，依赖ng-model自动完成数据绑定
4. 优化数据处理：在fullName方法中处理空值情况，避免出现多余空格；可选添加表单清空逻辑提升用户体验
5. 统一数据管理：将records数组放在myCtrl作用域下，确保提交方法能直接操作数据，表格的ng-repeat能正确渲染记录

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