将文本框的值复制到动态表单中的另一个文本框
我在我的UI的上半部分有一个文本框,下面的动态表单包含相同的名称并且应该具有相同的值。我需要在动态表单上有一个复制按钮,并将我输入的值复制到下面的动态表单中。我正在使用angularjs。我怎么可能做到这一点?将文本框的值复制到动态表单中的另一个文本框
我的HTML表单是这样的:
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name Sub: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pNameSub" ng-required="true" id="pNameSub" ng-model="languageItem.pNameSub" required/>
</div>
</div><br/><br/><br/>
我需要这个文本框的输入值复制到我的动态表单下方按钮点击
<div class="text-left"><h3>New Languagessssss <button class="btn btn-primary pull-right" type="button" ng-click="removeLanguageItem(languageItem)" value=""><span class="fa fa-minus"></span></button> <button class="btn btn-primary pull-right" type="button" ng-click="addLanguageItem()" value="" /><span class="fa fa-plus"></span></button></h3></div><br/> <legend> </legend>
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name Sub: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pNameSub" ng-required="true" id="pNameSub" ng-model="languageItem.pNameSub" required/>
</div>
</div><br/><br/><br/>
</div>
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Featuressss: </label>
<div class="col-md-6">
<!-- <input type="text" class="form-control" name="lFeature" ng-required="true" id="lFeature" ng-model="languageItem.lFeature" required/> -->
<textarea rows="1" cols="25" class="form-control" style="border-color: #FF69B4; color:#FF1493; border-radius: 5px; height: 50px;" ng-model="pfeatureEdit" name="lFeature" id="lFeature" ng-model="languageItem.lFeature" required></textarea>
<textarea rows="1" cols="25" class="form-control" style="border-color: #FF69B4; color:#FF1493; border-radius: 5px; height: 50px;" ng-model="pfeatureEdit" name="pfeatureEdit" id="pfeatureEdit"></textarea>
</div>
</div><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Ingredient: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="lIngredient" ng-required="true" id="lIngredient" ng-model="languageItem.lIngredient" required/>
</div>
</div><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Instruction: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="lInstruction" ng-required="true" id="lInstruction" ng-model="languageItem.lInstruction" required/>
</div>
</div><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Language Category: </label>
<div class="input-group">
<div class="input-group-btn">
<select class="pull-right" type="text" name="languageCat" id="languageCat" ng-model="languageItem.languageCat">
<option value="">---Please select---</option>
<option ng-repeat="item in scpLangCat" value="{{item.language_name}}">{{item.language_name}} - {{item.language_description}}</option>
</select>
</div>
</div>
</div><br/><br/>
</div><br/><br/>
</div>
</div>
I have these kind of codes in my controller file.
For the dynamic form:
//** Dynamic Funcion for adding language form
$scope.LanguageFormData = {};
$scope.LanguageFormData.language = [
{ bName: null, pName: null, pNameSub: null, lFeature: null, lIngredient: null, lInstruction: null, languageCat: null }
];
$scope.addLanguageItem = function() {
$scope.LanguageFormData.language.push({ bName: null, pName: null, pNameSub: null, lFeature: null, lIngredient: null, lInstruction: null, languageCat: null });
};
$scope.removeLanguageItem = function(languageItem) {
//console.log(subscriber);
$scope.LanguageFormData.language.pop(languageItem);
};
你应该有一个按钮,这确实副本:
HTML
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<button class="btn btn-primary" ng-click="copyOrigin(languageItem)">Copy</button>
... rest of your code...
</div>
每个元素都有一个按钮。要在此元素中复制从原点复制的选项。
JS:
$scope.copyOrigin = function (item) {
item.bName = $scope.languageItem.bName;
item.pName = $scope.languageItem.pName;
item.pNameSub = $scope.languageItem.pNameSub;
};
凡item
是在元素列表中item_i
。
使用此代码,基本上,您将从原始表单中获取值,并移至作为函数中参数接收的项目。
您可以检查此plnkr:http://plnkr.co/edit/7ypP10YdsgHF3QNwJ01J?p=preview
在plnkr。
- 版本1:您的代码。
- 版本2:带有复制按钮的代码。
额外提示:
- 瓦尔&功能应该开始用小写和驼峰写入(即使是那些在
$scope
这工作正常,但我注意到,原型上的ng模型与新语言形式相同但我将这些数据保存在数据库中,我想我需要使ng模型不同。有什么办法可以做到吗? – bleykFaust
你的意思是“ng-model”的起源与新语言形式相同吗? 它们是基于您的代码具有相同名称的变量。它们是基于你复制目的的相同价值的变量。但他们不一样。尝试下面的例子:0.在原始数据中写入“Option 0”,并将其复制到第一项。 1.写'选项1',你会选择第一项不会改变。 2.将'选项1'复制到第二项。第一项是选项0,第二项是选项1.不是相同的值。你不要改变别的。这是你的问题? – joseglego
实例不同。他们正在将原始数据复制到项目数据。就这样。 – joseglego
无法看到副本按钮的任何地方你代码? – Icycool
@Icycool已添加我的按钮已经 – bleykFaust