[英]Dynamic Row add + drop down based selection in angularjs
Very new to angularjs, so please forgive me if it is easy one. 对angularjs来说还很新,所以如果很简单请原谅我。
I want to create dynamic rows for input fields,combobox using angularjs's ng-repeat . 我想使用angularjs的ng-repeat为输入字段combobox创建动态行。 When we choose an item from combobox it will display uom,product_mrp of that particular product.
当我们从组合框中选择一个项目时,它将显示该特定产品的uom,product_mrp。 and when quantity is typed its calculation is displayed in another column.Now My problem is, When i click on add new row,it will add one row and when we select combo box in that particular row it will override the previous rows values in textbox
现在,我的问题是,当我单击添加新行时,它将添加一行,而当我们在该特定行中选择组合框时,它将覆盖文本框中的先前行值
My Html Code 我的HTML代码
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<table frame="box" rules="all">
<thead>
<tr>
<th>Description</th>`enter code here`
<th>Quantity</th>
<th>UOM</th>
<th>Unit Price</th>
<th>Amount</th>
<th>Remarks</th>
<th></th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr ng-repeat="r in rows">
<td>
<select ng-model="p.item_description" ng-change="getProductDetails(p.item_description)" ng-options="p.item_code as p.item_description for p in product">
<option value="">Select Product</option>
</select>
</td>
<td>
<input type="text" style="width: 80px" ng-model="p.quantity" value="0" />
</td>
<td>
<input type="text" disabled="disabled" style="width: 80px" ng-model="nrows.uom" />
</td>
<td>
<input type="text" style="width: 80px" disabled="disabled" ng-model="nrows.product_mrp" value="0" />
</td>
<td>{{r.amount=p.quantity*nrows.product_mrp| currency}}</td>
<td>
<textarea name="message" id="message" class="form-control" rows="2" cols="20" required="required" placeholder="Remarks" ng-model="r.remarks"></textarea>
</td>
<td>
<div class="text-center">
<button ng-click="addRow()">Add Row</button>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<h4>TOTAL :</h4>
</td>
<td>
<h4>
<strong>{{total_amount() |currency}}</strong>
</h4>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Javascript 使用Javascript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.rows = [{}];
$scope.nrows = [];
$scope.addRow = function() {
$scope.rows.push({
});
};
$scope.getProductDetails=function(id){
angular.forEach($scope.product, function(p) {
if(p.item_code==id)
{
$scope.nrows.uom=p.uom;
$scope.nrows.product_mrp=p.product_mrp;
console.log(p.item_description+" "+p.uom+" "+p.product_mrp);
}
else
{
}
})
}
$scope.total_amount = function() {
var total = 0;
$scope.rows.forEach(function(row) {
total += row.amount;
})
return total;
}
$scope.product= [{
"item_code": 1001,
"uom": "Nos.",
"product_mrp": 12,
"item_description": "CHOCO FILL 250GM"
}, {
"item_code": 1002,
"uom": "Nos.",
"product_mrp": 38,
"item_description": "LUX GOLD 75GM"
}, {
"item_code": 1003,
"uom": "Nos.",
"product_mrp": 20,
"item_description": "CHOCO BAR"
}, {
"item_code": 1004,
"uom": "Nos.",
"product_mrp": 15,
"item_description": "CASATA"
}, {
"item_code": 1005,
"uom": "Nos.",
"product_mrp": 12,
"item_description": "GOOD DAY 100GM"
}, {
"item_code": 1006,
"uom": "Nos.",
"product_mrp": 18,
"item_description": "Garam Masala"
}, {
"item_code": 1007,
"uom": "Nos.",
"product_mrp": 25,
"item_description": "VIVEL SOFT 75GM"
}, {
"item_code": 1008,
"uom": "Nos.",
"product_mrp": 45,
"item_description": "SUNLIGHT 500GM"
}, {
"item_code": 1009,
"uom": "Nos.",
"product_mrp": 65,
"item_description": "Dove 75gm"
}, {
"item_code": 1010,
"uom": "Nos.",
"product_mrp": 38,
"item_description": "NIRMA 250GM"
}, {
"item_code": 1011,
"uom": "Nos.",
"product_mrp": 150,
"item_description": "FOUNDATION CREAM"
}]
});
http://plnkr.co/edit/iip3u8BrXgWi0is60iFq?p=preview http://plnkr.co/edit/iip3u8BrXgWi0is60iFq?p=preview
You should not modify the $scope.product
object, Instead you should use row
to store selected value. 您不应修改
$scope.product
对象,而应使用row
存储选定的值。 Here I have slightly modified your code. 在这里,我对您的代码做了一些修改。
JavaScript JavaScript的
$scope.getProductDetails = function(row) {
angular.forEach($scope.product, function(p) {
if (p.item_code == row.item_code) {
row.uom = p.uom;
row.product_mrp = p.product_mrp;
}
})
}
HTML HTML
<tr ng-repeat="r in rows">
<td>
<select ng-model="r.item_code" ng-change="getProductDetails(r)" ng-options="p.item_code as p.item_description for p in product">
<option value="">Select Product</option>
</select>
</td>
<td>
<input type="text" ng-model="r.quantity" />
</td>
<td>
<input type="text" ng-model="r.uom" />
</td>
<td>
<input type="text" ng-model="r.product_mrp" />
</td>
<td>{{r.amount=r.quantity*r.product_mrp| currency}}</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.