我在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);
};
答案 0 :(得分:0)
你应该有一个按钮来复制:
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>
每个元素都有一个按钮。要在THIS元素中复制从原点复制的选项。
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中。
额外提示:
$scope