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

时间:2017-08-15 02:12:14

标签: javascript jquery html angularjs copy

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

1 个答案:

答案 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中。

  • 版本1:您的代码。
  • 版本2:带复制按钮的代码。

额外提示:

  • Vars&amp;函数应该从lowerCase开始并用camelCase编写(即使是$scope
  • 中的那些函数