Angularjs在沒有提交表單按鈕的情況下向數組添加數據

我有一個與ng-repeat一起顯示的數組，也有向此數組添加數據的表單。
但我不想使用按鈕來提交此表單，所以我在每個輸入中使用ng-blur，並調用將數據添加到我的數組的函數，但存在問題。
當我使用tab按鈕轉到下一個輸入，數據添加，但我在一個空的形式的第二輸入再次鍵入
Angularjs在沒有提交表單按鈕的情況下向數組添加數據

你可以看到我的樣品在這裏：link

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" 
    } 
];

來源

2017-04-04 amirito

didnot得到您的要求。你能詳細說明一下嗎？ – Sravan

@Sravan只看到我的plunker（鏈接），填寫空表單的第一個輸入，並按下標籤按鈕 – amirito

您只需檢查$ scope值是否爲空之後再將其推入數組。我更新了你的搶劫者。請檢查

來源

2017-04-04 13:28:00 CrazyMac

感謝您的回答，但並不要求所有的值 – amirito

不知道你的要求是什麼。你想什麼時候推動發生？ – CrazyMac

我想要一個沒有提交按鈕的表單。我的示例有一個錯誤，當使用shift按鈕，只想要一個表單的想法，而不提交按鈕 – amirito

Angularjs在沒有提交表單按鈕的情況下向數組添加數據

回答

相關問題