Javascript 创建构建多维数组的动态表单

我是一名php开发人员，对angular和javascript一般来说都是新手，但我发现它对于创建交互式UI来说非常强大和快速

我想为用户创建一个表单来创建一个叫做程序的对象，一个程序有一些基本信息，比如标题和描述，它可以有很多个星期。我希望它们是一个“添加周”按钮，按下时显示一组与周相关的表单字段，如果再次按下，则显示另一组表单字段以填写第二周信息

edit1：具体来说，我是如何使用addWeeks方法将对象添加到scope.program的

其次，当我在console.log中记录$scope.program时，它看起来非常混乱，对象中有很多数组。它看起来不像一个干净的数据数组，但这可能只是因为我不习惯javascript和或json？很明显，每周都会有7天的时间，每天都会有很多事情发生，所以在我看来这会很混乱，但也许我应该有信心：p

最后，addProgram方法如何创建要发送到服务器的json对象

提交表单时，它应该发布一个json对象，如下所示

program {
    title: 'name of programme',
    desc: 'description of programme',
    weeks: [
            {
                item1: 'foo',
                item2: 'more foo'
            },
            {
                item1: 'foo2',
                item2: 'more foo 2'
            }
           ]
    ]
}

下面是我现在正在做的一个例子，但我不确定这是最好的，甚至不是一个好的方法，特别是我如何在addWeek方法中附加数组/对象

表单和它发布的对象（天数、会话、练习等）将有更多的层，所以在添加所有这些之前，我想获得正确操作的基础知识

html

---

在我看来，你已经很好地掌握了它。addWeek代码看起来是正确的。您在

console.log

模型中看到的额外数据是Angular跟踪绑定的一些内部内容。当你把它发布到你的服务器上时，它应该被Angular清理掉

Angular有一个JSON函数，可以从JSON中删除所有哈希值和其他“Angular”内容。这就是为什么它们以美元开始，这样它就知道如何删除它们

使用时会自动发生这种情况，文档中有：

如果请求配置对象的数据属性包含对象，则将其序列化为JSON格式

由于Angular将清理散列和其他内容，因此在发布模型时不需要“重建”模型。。。只需将数据设置为

$scope.program

，并删除

$scope.addProgram

中70%的代码即可

---

要更具体地了解Angular是如何清理JSON的，请查看以下答案：

我觉得很好。。。你有更具体的问题吗？谢谢你的回答，我在顶部添加了一些更具体的问题，标记为edit1yes，这完全可以。添加一个空白周是完全有效的代码，如果这是您想要的，也是一个不错的设计模式。另一种方法是将两个输入置于

ng repeat

之外，并将它们建模到

tempWeek

对象上，然后将

addWeek（）

be

$scope.program.weeks.push（tempWeek）；tempWeek={}。
<div ng-app="trainercompare">

 <div ng-controller="programsController">

    <input type="text" placeholder="Program Title" ng-model="program.title"></br>
    <input type="text" placeholder="Program Focus" ng-model="program.focus"></br>
    <input type="text" placeholder="Program Description" ng-model="program.desc"></br>

    <button ng-click="addWeek()"> add week</button>

    <div ng-repeat="week in program.weeks">

        <input type="text" placeholder="Name the week" ng-model="week.name">
        <input type="text" placeholder="Describe It" ng-model="week.desc">
        {{ week.name }}</br>
        {{ week.desc }}</br>

    </div>

    <button ng-click="addProgram()"> add program</button>

 </div>

</div>

var myModule = angular.module("trainercompare", ['ui.bootstrap']);

function programsController($scope, $http) {


    $scope.program = { 
        weeks: [{

        }]
    };

    $scope.addWeek = function() {
        $scope.program.weeks.push(
            {

            }
        );
    };


    function isDefined(x) {
    var undefined;
    return x !== undefined;
    }

    $scope.addProgram = function() {

        var program = {
            title: $scope.program.title,
            focus: $scope.program.focus,
            desc: $scope.program.desc,
            weeks: []
        };

        angular.forEach($scope.program.weeks, function(week, index){
            var weekinfo = {
                name: week.name,
                desc: week.desc
            };

            program.weeks.push(weekinfo);
        });

        $http.post('/programs', program).success(function(data, status) {
            if(isDefined(data.errors)) {
                console.log(data.errors);
                }
            if(isDefined(data.success)) {
                console.log(data.success);
            }
        });

    }; 


}