javascript - 从表单输入创建对象以传递给 Controller ​​方法

Question

我的 js/ Controller 中有一系列作业。数组中的每个作业对象都有作业名称、公司、城市等属性。是否可以通过提交包含属性输入的表单将其放入作业对象，然后将其插入 Controller 中的作业数组中？

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

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

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

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

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