从表单输入创建对象以传递给控制器​​方法

Question

我的 js/控制器中有一系列作业。数组中的每个job对象都有jobName、company、city等属性。是否可以通过提交带有属性输入的表单使其成为job对象，然后将其推送到控制器中的jobs数组中？

例如，我有一个表单，我输入了 Software Developer, StackOverflow, NY。我可以将表单包装到具有正确属性的对象中，然后将其传递到控制器中的作业数组中以在视图上查看它吗？

到目前为止，这是我的表单代码...

        <form name="jobForm" ng-submit="list.addJob(jobForm)">
                <div class="form-group" id="test">
                    <label>Job Name:</label>
                    <input ng-model="jobName" type="text"/>
                </div>
                <div>
                    <label>Company:</label>
                    <input ng-model="companyDescription" type="text"/>

                    <div><button type="submit">Enter job entry</div>
                </div>

                <!-- this is where the live preview is. ng-model in the input binds it to these values -->
                <blockquote>
                <h4><u>Live Preview</u></h4>
                    <b>Job Name:</b> {{jobName}}
                    <div><b>Company:</b>{{companyDescription}}</div>
                </blockquote>
      </form>

所以我想创建一个 JOB 对象，使用 jobName 和 companyDescription 的输入作为对象的名称和公司属性。我怎样才能做到这一点？或者我使用了错误的方法。感谢您的帮助！

Answer 1

对于初学者来说，有一条黄金法则，ng-model 应该始终是一个对象属性，以 ... 或者您可能会由于继承而遇到许多子范围问题

因此，您的整个问题通过不使用单独的范围属性并为表单中的所有ng-model 使用一个对象来简化

$scope.job={}
<input ng-model="job.jobName" type="text"/>
<input ng-model="job.companyDescription" type="text"/>

然后，当您需要将其发送到服务器时，就这么简单

$http.post(url, $scope.job).then(func....

或推送到另一个数组

  $scope.allJobs.push($scope.job);
  $scope.job = {} // reset