2016-11-29 75 views
-4

我想將特定div的文本框的內容複製到另一個div如何將div的所有文本框值複製到另一個div文本框

我通過一個包含所有產品的產品數組進行循環,然後使用parentChildMapping檢查產品是否有孩子。

如果我們輸入min,max,typ,然後添加一個孩子的值,那麼我希望我們爲min,max,typ輸入的所有值都被複制。

enter image description here

 <!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <link rel="stylesheet" href="bootstrap-theme.min.css"> 

    <script src="jquery-2.2.5.min.js" type='text/javascript'></script> 
    <script src="bootstrap.min.js" type='text/javascript'></script> 
    <script src="angular.min.js" type='text/javascript'></script> 
    <script src="parent_child_mapping.js" type='text/javascript'></script> 
    <script src="products.js" type='text/javascript'></script> 
    <script src="app.js" type='text/javascript'></script> 
    <script src="indexController.js" type='text/javascript'></script> 
    <style> 
      .clsProductDetailsHldr .well 
      { 
       padding-top: 5px; 
       padding-bottom: 5px; 
       margin-bottom: 4px; 
      } 
      .inputError 
      { 
       border: 1px solid red; 
       background-color: antiquewhite; 
      } 
      .row 
      { 
       margin-bottom: 4px; 
      } 
     </style> 
    </head> 

    <body ng-app="productspoc"> 
    <div ng-controller="indexCtrl"> 
     <div class="container clsProductDetailsHldr"> 
     <div ng-repeat="product in products track by $index"> 

      <div class="well" ng-class="{'col-sm-6':!checkIfProductHasChildren(product)}"> 
      <div class="row"> 
       <span class="" ng-class="{'col-sm-10':checkIfProductHasChildren(product),'col-sm-4':!checkIfProductHasChildren(product)}">{{product}}</span> 
       <span class="col-sm-4" ng-if="!checkIfProductHasChildren(product)"> 
       <input type="text" value="" ng-model="productsObj[''+product]" /> 
       </span> 
       <span class="col-sm-2" ng-if="checkIfProductHasChildren(product)"> 
       <input type="button" class="btn" value="Add Child" ng-click="addChildToParent(product)" /> 
       </span> 
      </div> 
      <div class="row"> 
       <div class="col-sm-1"></div> 
       <div class="col-sm-11"> 
       <span class="col-sm-10" ng-if="checkIfNewChild(product,key)"> 
        <input type="button" class="btn" value="Remove Child" ng-click="removeChildFromParent(product, key)" /> 
       </span> 
       <div class="col-sm-4" ng-if="checkIfProductHasChildren(product)" ng-repeat="(key1, value1) in productsObj[''+product] track by $index"> 
        <span class="col-sm-2">{{key1}}</span> 
        <span class="col-sm-2"> 
        <input type="text" ng-focus="onInputFocus($event)" value="" ng-model="productsObj[''+product][''+key1]" /> 
        </span> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="row" style="text-align:center;"> 
      <span> 
      <input type="button" value="clear" class="btn btn-primary" ng-click="onClearClick()" /> 
      </span> 
      <span> 
      <input type="button" value="Save" class="btn btn-success" ng-click="onSaveClick()" /> 
      </span> 
     </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 

      $(".clsAddChild").click(function() 
      { 
       var newChild = ""; 
       newChild+= '<div class="row">'; 
        newChild+= '<div class="col-sm-12" style="padding-left:20px;"><span>NewChild Child 1</span></div>'; 
       newChild+= '</div>'; 
       newChild+= '<div class="row">'; 
        newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 1</span><span><input type="text" /></span></div>'; 
        newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 2</span><span><input type="text" /></span></div>'; 
        newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 3</span><span><input type="text" /></span></div>'; 
        newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 4</span><span><input type="text" /></span></div>'; 
        newChild+= '<div class="col-sm-12" style="padding-left:25px;"><span>NewChild Child 1 child 5</span><span><input type="text" /></span></div>'; 
       newChild+= '</div>'; 

       $(this).closest(".parentChildWrapper").append(newChild); 
      }); 

     </script> 
    </body> 

</html> 

indexController.js 
angular.module('productspoc') 
    .controller('indexCtrl',['$scope', function ($scope) { 

    $scope.productsObj = {}; 
    $scope.products = products; 
    $scope.parentChildMapping = parentChildMapping; 

    $scope.checkIfProductHasChildren = function(product) 
    { 
     return product in $scope.parentChildMapping; 
    }; 
    $scope.addChildToParent = function(parent) 
    { 
     var porductIndex = products.indexOf(parent); 
     products.splice(porductIndex + 1, 0, parent + 1); 
     $scope.parentChildMapping[parent +1]= parent + 1; 
     $scope.productsObj[""+parent +1]= {"Min": "","Typ":"","Max": ""}; 
     console.log($scope.productsObj); 
    }; 

    $scope.checkIfNewChild = function(product,key) 
    { 
     if((product.indexOf("1") ===2 || product.indexOf("1") ===3 ||product.indexOf("1") ===4)) 
      return true; 
     else 
      return false; 
    }; 

    $scope.removeChildFromParent = function(product, key) 
    { 
     delete $scope.productsObj[""+product]; 
     var porductIndex = products.indexOf(product); 
     products.splice(porductIndex, 1); 

    }; 

    $scope.onClearClick = function() 
    { 
     var r=confirm("Are you sure, wanted to reload the page. If yes then click on OK, else Cancel and resume your work."); 
     if (r==true){ 
      window.location.reload(); 
      angular.element(".clsProductDetailsHldr input[type='text']").val(""); 
     } 
     else{ 
     } 
    }; 

    $scope.validateNumberFields = function() 
    { 
     var isValid = true; 
     angular.forEach(angular.element(".clsProductDetailsHldr .onlyNumbers"), function(value, index){ 
      if(isNaN(angular.element(value).val())) 
      { 
       isValid = false; 
       angular.element(value).addClass("inputError"); 
      } 
     }); 

     return isValid; 
    }; 

    $scope.onInputFocus = function(event) 
    { 
     angular.element(event.currentTarget).removeClass("inputError"); 
    }; 

    $scope.onSaveClick = function() 
    { 
     var isValid = $scope.validateNumberFields(); 
     if(!isValid) 
     { 
      alert("Selected Input feild has invalid number"); 
      return; 
     } 

     angular.forEach($scope.productsObj, function(value, key){ 
      if(value instanceof Object && value.hasOwnProperty('newChildCount')) 
       delete value.newChildCount; 

      if(value instanceof Object) 
      { 
       angular.forEach(value, function(value1, key1) 
       { 
        // Below code will check 
        // key1 should not be a Note and value1 should have some value 
        if(key1!=='Note' && value1) 
        { 
         console.log(value1.length) 
         var pram = value1.substring(value1.length-1, value1.length); 
         switch (pram) 
         { 
          case "n": 
          value1 = (value1.substring(0,value1.length-1))*.000000001; 
          break; 
          case "p": 
          value1 = (value1.substring(0,value1.length-1))*.000000000001; 
          break; 
          case "m": 
          value1 = (value1.substring(0,value1.length-1))*.001; 
          break; 
          case "u": 
          value1 = (value1.substring(0,value1.length-1))*.000001; 
          break; 
          case "k": 
          value1 = (value1.substring(0,value1.length-1))*1000; 
          break; 
          case "M": 
          value1 = (value1.substring(0,value1.length-1))*1000000; 
          break; 
          case "G": 
          value1 = (value1.substring(0,value1.length-1))*1000000000; 
          break; 
          default: 
          value1; 
          break; 
         } 
         $scope.productsObj[key][key1] = value1 ; 
         console.log(pram); 
        } 
        console.log(value1); 

       }); 
      } 
     }); 
     console.log(JSON.stringify($scope.productsObj)); 
     console.log($scope.productsObj); 
     var sub=confirm("Data will be saved on click of OK button."); 
     if (sub==true) 
     { 
      $.ajax({ 
         url: "/rest/products/add/", 
         type: "POST", 
         dataType: "json", // expected format for response 
         contentType: "application/json", // send as JSON 
         data: JSON.stringify($scope.productsObj), 
         complete: function() { 
          $window.location.href = "#/success.html"; 
          alert("Data saved to database: " + data); 
          console.log('success response' + response) 
         }, 

         success: function(data) { 
          $window.location.href = "#/success.html"; 
         alert("Data saved to database: " + data); 
         console.log('success response' + response) 
        }, 

         error: function() { 
         //called when there is an error 
         }, 
        }); 
     } 
     else 
     { 

     } 
    }; 

    $scope.initProductDetails = function() 
    { 
     for(var i=0;i<$scope.products.length;i++) 
     { 
      if($scope.products[i] in parentChildMapping) 
      { 
       $scope.productsObj[""+$scope.products[i]] = {}; 
       $scope.productsObj[""+$scope.products[i]].newChildCount = 0; 
       $scope.productsObj[""+$scope.products[i]] = {"Min": "","Typ":"","Max": ""}; 
      } 
      else 
       $scope.productsObj[""+products[i]] = ""; 
     } 
    }; 
    $scope.initProductDetails(); 

}]); 

    products.js 
    products = [ 
"Part_Number", 
"Name", 
"Code", 
"absmax_1", 
"absmax_2", 
"absmax_3", 
"absmax_4" 
] 


    parent_Child_Mapping.js 
    parentChildMapping ={ 
"absmax_1":"absmax_1", 
"absmax_2":"absmax_2", 
"absmax_3":"absmax_3", 
"absmax_4":"absmax_4", 
} 
+6

您試過了什麼? –

+1

你使用的是什麼代碼?我看到了AngularJS標籤,但沒有任何匹配。你能否提供更多細節? 請注意,對你的問題的讚譽並不是因爲這個問題對許多人來說聽起來微不足道,但它並不能提供完整的信息來幫助你。請按照下面的鏈接尋求幫助,提出好問題: http://stackoverflow.com/help/how-to-ask – Sid

+0

一個新來者的硬啓動, 在別人發佈答案之前更好地刪除問題,或者你將無法刪除它 –

回答

0

你可以把他想要在一個div克隆和克隆是整個DIV的所有元素。以下是顯示此類行爲的小示例代碼:

<html> 
    <head> 
     <script> 
      function cloneMe(){ 
       var tT = document.querySelectorAll('.Content > div'); //All the div inside .Content; 
       var tL = tT[tT.length - 1]; //The last div - the one to get copied 

       var tC = tL.cloneNode(true);// Deep cloning the last div 'tL' 
       tL.parentNode.appendChild(tC) //Adding the copy to the parent of the last div 'tL' 
      } 
     </script> 
    </head> 

    <body> 
     <button onclick = 'cloneMe()'>Add</button> 
     <div class = 'Content'> 
      <div> 
       <input name = 'min' type = 'text' placeholder = 'min' /> 
       <input name = 'typ' type = 'text' placeholder = 'typ' /> 
       <input name = 'max' type = 'text' placeholder = 'max' /> 
      </div> 
     </div> 
    </body> 
</html> 
+0

謝謝,但它是添加元素相同div,而不是新div – experimenter

+0

@experimenter:那麼,它會複製輸入的父div,而不是div.Content。一個男人必須將其歸因於他的需要。 – Lain

相關問題