AngularJS：如何将数据从引导模式推送到表
Posted
技术标签:
【中文标题】AngularJS：如何将数据从引导模式推送到表【英文标题】：AngularJS: How to push data from bootstrap modal to table 【发布时间】：2016-12-29 17:16:58 【问题描述】：我有一个输入数据的引导模式，当单击提交按钮时，我想将数据推送到引导表中。但是什么也没发生，我不知道为什么...... 这是我的模态：
<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>
这是我的桌子：
<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>
谁能帮忙？
【问题讨论】：
像这样在控制器中进行 DOM 访问（您在其中调用$('#workExpModal').modal('hide')）并不是编写干净、可测试的 AngularJS 代码的最佳方式。我建议您考虑使用类似 UI Bootstrap Angular 模块的东西，它添加了像 $uibModal 这样的服务，让您可以更轻松地做到这一点。
请分享整个代码
【参考方案1】：
您似乎没有在
中传递新数据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>
您修改后的控制器将是
<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>
【讨论】：
我做到了，但是当我点击提交按钮时仍然没有任何反应:( 对不起。没有在你的控制器中声明 $scope.workExperience= 对不起。即使我检查它也不起作用。让我知道您的可用性，我们将在团队查看器中解决。你没事吧？？ 是的，它奏效了。抱歉很久没有检查这个。谢谢。【参考方案2】：我没有为你提供代码，但我提供了一个问题来帮助你得到答案：
您的模态是否在 ng-controller 范围内？ 如果不是，那么所有与角度相关的属性都不起作用。 你甚至可以在你的 saveWorkExp() 函数中尝试 console.log 看看它是否被调用。
【讨论】：
以上是关于AngularJS：如何将数据从引导模式推送到表的主要内容，如果未能解决你的问题，请参考以下文章
如何使用Pentaho勺子将数据从MySQL数据库推送到Facebook网页