gpt4 book ai didi

javascript - AngularJS:如何将数据从 Bootstrap 模式推送到表

转载 作者:搜寻专家 更新时间:2023-11-01 04:35:33 25 4
gpt4 key购买 nike

我有一个用于输入数据的 Bootstrap 模式,当点击提交按钮时,我想将数据推送到一个 Bootstrap 表中。但是没有任何反应,我不知道为什么......这是我的模态:

<div class="modal fade-scale" id="workExpModal" name="workExpModal"
role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Work Experience</h4>
</div>
<div class="modal-body">
<form action="" method="post" ng-submit="saveWorkExp()"
name="workExpForm">
<div class="form-group">
<label>Time:</label> <br>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="timeStart"
placeholder="From: dd/MM/yyyy" ng-model="workExperience.From" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="timeEnd"
placeholder="To: dd/MM/yyyy" ng-model="workExperience.To" />
</div>
</div>
<br> <label>Title/Position:</label><br>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="title"
placeholder="Title/Position" ng-model="workExperience.Title">
</div>
</div>
<br> <label>Workplace/Company:</label><br>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="workplace"
placeholder="Workplace/Company"
ng-model="workExperience.Workplace" />
</div>
</div>
<br> <label>Contact:</label><br>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="contact"
placeholder="Contact" ng-model="workExperience.Contact" />
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

这是我的 table :

<div class="container page-header table-responsive">
<h3>Work Experience</h3>
<table class="table" id="tblWorkExp">
<thead>
<tr>
<th>Time</th>
<th>Title/Position</th>
<th>Workplace/Company</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="workexp in workexps">
<td>{{workexp.From}} - {{workexp.To}}</td>
<td>{{workexp.Title}}</td>
<td>{{workexp.Workplace}}</td>
<td>{{workexp.Contact}}</td>
</tr>
</tbody>
</table>
</div>

这是我的职能:

<script type="text/javascript">
/* $(document).ready(function() {
$(".modal").validator();
}); */
var app = angular.module('resumeApp', []);
app.controller('resumeController', function($scope) {
$scope.workexps = [];
$scope.saveWorkExp = function() {
$scope.workexps.push($scope.workExperience);
delete $scope.workExperience;
$('#workExpModal').modal('hide');
$scope.workExpForm.$setPristine();
}
});
</script>

有人能帮忙吗?

最佳答案

看来你没有传递新数据

ng-submit="saveWorkExp(workExperience)"

使用下面的代码

<div class="modal fade-scale" id="workExpModal" name="workExpModal"
role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Work Experience</h4>
</div>
<div class="modal-body">
<form action="" method="post" ng-submit="saveWorkExp(workExperience)"
name="workExpForm">
<div class="form-group">
<label>Time:</label> <br>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="timeStart"
placeholder="From: dd/MM/yyyy" ng-model="workExperience.From" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="timeEnd"
placeholder="To: dd/MM/yyyy" ng-model="workExperience.To" />
</div>
</div>
<br> <label>Title/Position:</label><br>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="title"
placeholder="Title/Position" ng-model="workExperience.Title">
</div>
</div>
<br> <label>Workplace/Company:</label><br>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="workplace"
placeholder="Workplace/Company"
ng-model="workExperience.Workplace" />
</div>
</div>
<br> <label>Contact:</label><br>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" id="contact"
placeholder="Contact" ng-model="workExperience.Contact" />
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

你修改后的 Controller 将是

<script type="text/javascript">
/* $(document).ready(function() {
$(".modal").validator();
}); */
var app = angular.module('resumeApp', []);
app.controller('resumeController', function($scope) {
$scope.workexps = [];
$scope.saveWorkExp = function(workExperience) {
$scope.workexps.push(workExperience);
delete $scope.workExperience;
$('#workExpModal').modal('hide');
$scope.workExpForm.$setPristine();
}
});
</script>

关于javascript - AngularJS:如何将数据从 Bootstrap 模式推送到表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39091649/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com