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。 我已經更新了您的矮人。 請檢查