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在没有提交表单按钮的情况下向数组添加数据

回答

相关问题