Question

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

<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>

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

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

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

我该如何处理我的情况？ IE：几种形式，几个不一致的参数，以及需要将每个参数作为JSON POST。

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

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']);
    };

});

Answer 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

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

1 个答案: