如何将输入字段绑定到一个模态输入字段
how to bind input fields to a modal input fields AngularJS
我有一个带有Customer的表单,它的属性填充了输入字段。如果用户需要更改Customer,则单击CustomerName输入。一个模态打开,其中有一个客户列表供他们选择。选择填充该模式中的输入字段。我需要将新信息放入已经填充的输入字段中。plunkr
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Name</span>
<input style="width:400px" ng-model="currentItem.CustomerName" class="form-control btn btn-default" ng-click="editJobCustomerModal()" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Address</span>
<input style="width:390px" ng-model="currentItem.CustomerAddress" class="form-control" type="text">
</div>
</div>
模态
<div ng-controller="JobCtrl" data-backdrop="static" data-keyboard="false" class="modal fade" id="editJobCustomerModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class=" modal-dialog modal-editJobCustomer">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title custom_align" id="Heading">Change Job Customer</h4>
</div>
<div class="modal-body">
<div class="container">
<form ng-submit="submitJob()" enctype="multipart/form-data">
<fieldset>
<div class="col-md-8">
<!-- Prepended text-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Name</span>
<input style="width:400px" ng-model="selectedCustomer.CustomerName" class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Address</span>
<input style="width:390px" ng-model="selectedCustomer.CustomerAddress" class="form-control" type="text">
</div>
</div>
</fieldset><br />
<input style="float:right" class="btn btn-danger" ng-click="" type="button" value="Update"/>
<input style="float:right; margin-right:20px" type="button" class="btn btn-primary" data-dismiss="modal" value="Cancel" />
</form>
</div>
</div>
</div>
</div>
</div>
解决了。正确的代码如下图所示Plunkr
<body ng-app="TestApp">
<div ng-controller="JobCtrl">
<div ng-repeat='currentItem in customers'>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Name</span>
<input ng-model="currentItem.CustomerName" class="form-control btn btn-default" ng-click="editJobCustomerModal($index)" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Address</span>
<input type="text" ng-model="currentItem.CustomerAddress" class="form-control" />
</div>
</div>
</div>
<div data-backdrop="static" data-keyboard="false" class="modal fade" id="editJobCustomerModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class=" modal-dialog modal-editJobCustomer">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title custom_align" id="Heading">Change Job Customer</h4>
</div>
<div class="modal-body">
<div class="container">
<form ng-submit="" enctype="multipart/form-data">
<fieldset>
<div class="col-md-8">
<!-- Prepended text-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Name</span>
<input type="text" ng-model="selectedCustomer.CustomerName" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">C. Address</span>
<input type="text" ng-model="selectedCustomer.CustomerAddress" class="form-control" />
</div>
</div>
</div>
</fieldset>
<br />
<input type="button" style="float:right" class="btn btn-danger" ng-click="" data-dismiss=modal value="Update" ng-go-click="#" />
<input type="button" style="float:right; margin-right:20px" class="btn btn-primary" data-dismiss="modal" value="Cancel" ng-go-click="#" />
</form>
</div>
</div>
</div>
</div>
</div>
app.controller('JobCtrl', function ($scope, $rootScope) {
//Modal for Edit JobCustomer
$scope.customers = [
{'CustomerName':'Name1','CustomerAddress':'addy1'},
{'CustomerName':'Name2','CustomerAddress':'addy2'}
];
$scope.editJobCustomerModal = function (item) {
$scope.selectedCustomer = $scope.customers[item];
$('#editJobCustomerModal').modal();
};
});
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 使用 Javascript 将字段输入除以 12
- 合并来自多个字段输入的搜索结果
- 使用 Javascript 实时打印字段输入数据
- 防止AngularJS中跨路由的字段输入重复
- 引用Iframe中的字段输入
- 禁用html5”;“必需”;不显示窗体部分时的字段输入属性
- JavaScriptFormValidation-需要特定的字段输入,但使用大写/小写
- 验证VF页面上所需字段输入的Javascript不起作用
- 在没有
- 使用Jquery将字段输入值作为查询字符串附加到url
- HTML5 jQuery选择所有日期字段'输入:date'
- 将字段输入复制到另一个字段输入
- 向图像添加字段(输入)
- 动态添加字段输入不会存储值并传递给控制器
- 向输入字段输入键击
- 我如何通过javascript验证datetime字段输入
- HTML如何将用户字段输入作为json对象发送
- 如何根据'select' onchange事件将值填充到第二个输入字段?输入