使用 ng-model 跟踪许多动态表单答案

【问题标题】：Tracking many dynamic forms with ng-model使用 ng-model 跟踪许多动态表单
【发布时间】：2016-04-16 02:14:23
【问题描述】：

我在我的页面上生成了几十个表单。每个表单都有几个参数（不每个表单都相同）。我正在生成我的表单（简化）：

<div ng-repeat='module in modules'>
    <form ng-submit='submitModule(module)'>
        <div ng-repeat='arg in module.args'>
            <input ng-model='models[module.name][arg.name]' id="{{ arg.name }}">
        </div>
    </form>
</div>

您可以看到我正在尝试使用二维数组models[module.name][arg.name] 为每个输入参数分配一个唯一的ng-model。

因为我打算将其提交为 JSON，所以我的想法是我可以在我的控制器中执行 models[some_module] 以获取完整的 JSON，然后发布。

不幸的是，这不起作用，当我尝试models['test_module'] 时，我得到了未定义，而不是我的对象。代码中的其他地方没有错误，我已经进行了广泛的测试。问题在于这里使用了多维数组，这显然是一个很大的禁忌。

我应该如何处理我的情况？ IE：几种形式，一些不一致的参数，并且需要将每个参数作为 JSON 一起发布。

编辑：关于信息，我的控制器看起来像：

angular.module('app')
.controller('InputCtrl', function($scope, InputSvc) {
    $scope.models = {};

    InputSvc.list().success(function(modules) {
        $scope.modules = modules;
        $scope.models['test_module'] = {}
    });

    $scope.submitModule = function(module) {
        console.log($scope.models['test_module']);
    };

});

【问题讨论】：

不要认为这与你的错误有关，但是在访问它的属性之前，你不需要先测试models[module.name] 是否存在吗？类似(models[module.name] = models[module.name] || {})[arg.name]

标签： javascript arrays angularjs json forms

【解决方案1】：

也许你可以给每个表单一个控制器，这样模型的作用域就是表单实例而不是父对象：

<div ng-repeat='module in modules'>
    <form ng-controller="FormCtrl" ng-submit='submitModule(module)'>
        <div ng-repeat='arg in module.args'>
            <input ng-model='formData[arg.name]' id="{{ arg.name }}">
        </div>
    </form>
</div>

那么你的FormCtrl 就会有提交方法和模型：

angular.module('app')
.controller('FormCtrl', function($scope) {
    $scope.formData = {};

    $scope.submitModule = function(module) {
        console.log($scope.formData);
    };
});

Here is a Codepen

【讨论】：