Angular提交多个复选框并以特定格式获取提交的数据

时间:2018-04-24 08:48:23

标签: angularjs

您好我有以下json结构,我正在尝试使用angular中的checkbox指令构建多个复选框。

{
    "selected":"",
    "selectReportingYears":[
        {
            "report_date_year":2016
        },
        {
            "report_date_year":2017
        },
        {
            "report_date_year":2018
        }
    ]
}

{
    "selected":"",
    "selectInsurerType":[
        {
            "insurer_type_name": "Composite"
        },
        {
            "insurer_type_name":"Life"
        },
        {
            "insurer_type_name":"Random"
        }
    ]
}

所以当我提交值时,我希望以特定格式以角度提交数据。

{"report_date_year":[2016, 2018], "insurer_type_name":["composite", "life"]}

等等。我已经有一个执行ng-repeat的指令,并使用复选框显示选项。它只是提交位,并提交正确的格式我坚持。任何帮助深表感谢。非常感谢提前。

HTML

<form id="filterForm" class="content-form" method="post">
    <label>Reporting Year</label>
    <checkbox-builder table="selectReportingYears" field="report_date_year"></checkbox-builder>
    <button ng-click="submitQuery()" type="submit" name="submit">Submit</button>
</form>

指令模板

<label ng-repeat="value in selectdata[table]">
    <input type="checkbox" name="{{ table }}" value="{{ value[field] }}" ng-model="value[field]]">
    {{ value[field] }}
</label>

角度指令代码

tables.directive('checkboxBuilder', function () {
    return {
        restrict: 'AE',
        transclude: true,
        scope: {
            table: '@table',
            field: '@field'
        },

        controller: "tablesCtrl",
        templateUrl: 'assets/templates/angular/checkbox-field.html',
        link: function (scope, element, attrs) {
            scope.getSelectData(scope.table);
        }
    };
});

如果您需要更多信息,请告诉我。感谢。

0 个答案:

没有答案