我想將特定div
的文本框的內容複製到另一個div
。如何將div的所有文本框值複製到另一個div文本框
我通過一個包含所有產品的產品數組進行循環,然後使用parentChildMapping檢查產品是否有孩子。
如果我們輸入min,max,typ,然後添加一個孩子的值,那麼我希望我們爲min,max,typ輸入的所有值都被複制。
<!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",
}
您試過了什麼? –
你使用的是什麼代碼?我看到了AngularJS標籤,但沒有任何匹配。你能否提供更多細節? 請注意,對你的問題的讚譽並不是因爲這個問題對許多人來說聽起來微不足道,但它並不能提供完整的信息來幫助你。請按照下面的鏈接尋求幫助,提出好問題: http://stackoverflow.com/help/how-to-ask – Sid
一個新來者的硬啓動, 在別人發佈答案之前更好地刪除問題,或者你將無法刪除它 –