将文本框的值复制到动态表单中的另一个文本框

Question

我在我的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>&nbsp;<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); 
     }; 

Answer 1

你应该有一个按钮，这确实副本：

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