AngularJS将数据添加到数组而无需提交表单按钮

Question

我有一个用ng-repeat显示的数组，也有一种向该数组添加数据的形式。
但我不想使用按钮提交此表单，因此我在每个输入中使用了ng-blur ，并调用了一个将数据添加到数组中的函数，但这是有问题的。
当我使用tab按钮转到下一个输入时，会添加数据，但是我再次输入了空表格的第二个输入

您可以在这里查看我的示例： 链接

HTML代码

<form ng-submit="addJobRecord()" id="job_records" class="ui-state-default info_box">
  <a class="sortable-handler">
    <i class="fa fa-arrows"></i>
  </a>
  <h4>old form</h4>
  <div ng-repeat="x in job_records" class="info_box_body">
    <div>
      <div class="col-sm-6 pull-right">
        <label>name: </label>
        <input class="form-control" id="job_record_name" type="text" name="job_record_name" value="{{x.name}}" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>title: </label>
        <input class="form-control" id="job_record_title" type="text" name="job_record_title" value="{{x.title}}" />
      </div>
    </div>
    <div>
      <div class="col-sm-6 pull-right">
        <label>group: </label>
        <input class="form-control" id="job_record_group" type="text" name="job_record_group" value="{{x.group}}" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>situation: </label>
        <input class="form-control" id="job_record_situation" type="text" name="job_record_situation" value="{{x.situation}}" />
      </div>
    </div>
    <div class="clearfix"></div>
    <hr>
  </div>
  <div class="info_box_body" name="helpForm">
    <h4>empty form</h4>
    <div>
      <div class="col-sm-6 pull-right">
        <label>name: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_name" ng-model="JobRecordform.newJobName" placeholder="name" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>title: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_title" ng-model="JobRecordform.newJobTitle" placeholder="title" />
      </div>
    </div>
    <div>
      <div class="col-sm-6 pull-right">
        <label>group: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_group" ng-model="JobRecordform.newJobGroup" placeholder="group" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>situation: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_situation" ng-model="JobRecordform.newJobSit" placeholder="situation" />
      </div>
    </div>
  </div>
</form>

脚本代码

$scope.JobRecordform = {};
$scope.addJobRecord = function() {
    //here $scope.user will have all the 3 properties
    // alert(JSON.stringify($scope.form));
    console.log($scope.JobRecordform);

        $scope.job_records.push({
            name: $scope.JobRecordform.newJobName,
            title: $scope.JobRecordform.newJobTitle,
            group: $scope.JobRecordform.newJobGroup,
            situation: $scope.JobRecordform.newJobSit
        });
        $scope.JobRecordform = {};

};
$scope.job_records = [
    {
        name: "my job",
        title: "my job title",
        group: "my job group",
        situation: "my job situation"
    }
];

Answer 1

您只需要在将$ scope值推入数组之前检查$ scope值是否不为null。 我已经更新了您的矮人。 请检查