Question

我是一名php开发人员，一般都是角度和javascript的新手，但发现它非常强大且快速，可用于创建交互式UI

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

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

其次当我在console.log中查看$ scope.program时，对象内的对象中的很多数组看起来都很乱。它只是dosnt看起来像一个干净的数据数组但也许这只是因为我不习惯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'
            }
           ]
    ]
}

这是我正在做的codepen，但我不确定它是最好的甚至是好的方法，特别是我如何在addWeek方法中附加数组/对象。

表单及其发布的对象（天，会话，练习等）将会有更多层次，所以我想在添加所有这些之前获得正确执行此操作的基础知识。

HTML 的

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

app.js

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

    }; 


}

Answer 1

在我看来，你已经很好地掌握了它。 addWeek代码看起来正确。当您console.log模型时，您看到的额外数据是Angular内部跟踪绑定的内容。当您将其发布到您的服务器时，它应该由Angular清理。

Angular有一个JSON函数，可以从JSON中删除所有哈希值和其他“有角”的东西。这就是为什么他们以$开头，所以它知道要删除它们。

当您使用$http时会自动发生这种情况，它位于此处的文档中：

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

由于Angular会清理哈希和东西，所以当你发布它时你不需要“重建”模型......只需将数据设置为$scope.program并删除70％的代码$scope.addProgram。

要更具体地了解Angular如何清理JSON，请查看以下答案：Quick Way to "Un-Angularize" a JS Object

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

1 个答案: