javascript - 如何捕获用户生成的对象数组？

Question

我正在 try catch 用户生成的对象数组。我的问题是，虽然生成了数组，但对象无法保留用户输入的任何值，因此用具有 null 属性的对象填充数组。

这是代码。JavaScript:

// add additional employment
$scope.addEmployment = function() {

    $scope.AdditionalEmployment.push(
        {
            AddEmploymentStatusId: '',
            EmploymentTypeId: '',
            EmployerName: '',
            EmploymentStartDate: '',
            EmploymentEndDate: '',
            EmployerNumber: '',
            EmployerStAddress: '',
            EmployerCity: '',
            EmployerState: ''
        }
    );

};

$scope.saveApplication = function() {

    // create post obj
    var postObj = {

        AdditionalEmployment: $scope.AdditionalEmployment

    };

    // api post
    $http.post('/api/Employment/JobHistory', postObj)
        .success(function(data) {
            // success code

        })
        .error(function(data) {
            // error code
        });

};

HTML:

<fieldset class="FormBackground3">
                    <legend class="FormBackground3">Additional Employment</legend>
                    <div ng-repeat="x in AdditionalEmployment" class="text-center">
                        <h3>{{$index + 1}}</h3>
                        <!--Employment Status-->
                        <div class="form-group" style="display: inline-block;">
                            <i class="glyphicon glyphicon-asterisk"></i>
                            <label for="{{'empStatId' + $index}}" class="control-label">
                                Employment Status
                            </label>
                            <select class="form-control"
                                    ng-model="x[$index].EmploymentStatusId" id="{{'empStatId' +  $index}}"
                                    ng-options="x.Id as x.Status for x in Statuses.Employment">
                                <option value="">--Select--</option>
                            </select>
                        </div>

                        <!--Employment Type-->
                        <div class="form-group" style="display: inline-block;">
                            <i class="glyphicon glyphicon-asterisk"></i>
                            <label for="{{'empTypeId' + $index}}" class="control-label">
                                Employment Type
                            </label>
                            <select class="form-control"
                                    ng-model="x[$index].EmploymentTypeId" id="{{'empTypeId' + $index}}"
                                    ng-options="x.Id as x.Type for x in Statuses.EmploymentType">
                                <option value="">--Select--</option>
                            </select>
                        </div>

                        <!--Employer-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'emplyId' + $index}}" class="control-label">
                                Employer Name
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmployerName" id="{{'emplyId' + $index}}" />
                        </div>

                        <!--Employment Start Date-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'empStartId' + $index}}" class="control-label">
                                <i class="glyphicon glyphicon-calendar"></i>
                                Employment Start Date
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmploymentStartDate" id="{{'empStartId' + $index}}" bs-datepicker />
                        </div>

                        <!--Employment End Date-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'empEndId' + $index}}" class="control-label">
                                <i class="glyphicon glyphicon-calendar"></i>
                                Employment End Date
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmploymentEndDate" id="{{'empEndId' + $index}}" bs-datepicker />
                        </div>

                        <!--Employer Number-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'empNumId' + $index}}" class="control-label">
                                Employer Phone Number
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmployerNumber" id="{{'empNumId' + $index}}" />
                        </div>

                        <!--Employer St Address-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'empStId' + $index}}" class="control-label">
                                Employer St Address
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmployerStAddress" id="{{'empStId' + $index}}" />
                        </div>

                        <!--Employment City-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'empCityId' + $index}}" class="control-label">
                                Employer City
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmployerCity" id="{{'empCityId' + $index}}" />
                        </div>

                        <!--Employment State-->
                        <div class="form-group" style="display: inline-block;">
                            <label for="{{'empStateId' + $index}}" class="control-label">
                                Employer State
                            </label>
                            <input type="text" class="form-control"
                                   ng-model="x[$index].EmployerState" id="{{'empStateId' + $index}}" />
                        </div>

                        <!--Remove employment-->
                        <div class="text-center">
                            <button ng-click="removeEmployment($index)">
                                Remove
                            </button>
                        </div>


                    </div>
                    <div class="text-center" style="padding: 7px;">
                        <button ng-click="addEmployment()" class="btn btn-info btn-xs">
                            Add Additional Employment
                        </button>
                    </div>
                </fieldset> 

<button ng-click="saveApplication()" class="btn btn-warning">
                        Submit
                    </button>

我在这里缺少什么？

Answer 1

尝试更改您的 ng-model 以不包含 [$index]。看来您正在重复对象数组，然后尝试访问对象的数字索引。

我认为您将其分配给:

{ 1: field one, 2: field 2 ... }

例如:

ng-model="x.EmploymentStatusId"

我认为这就是问题所在。