对于angularjs来说很新，所以请原谅我，如果这很容易的话。
我想为输入字段创建动态行，使用angularjs＆ng-sng-repeat创建组合框。当我们从组合框中选择一个项目时，它将显示该特定产品的uom，product_mrp。当输入数量时，其计算显示在另一列中。现在我的问题是， 当我点击添加新行时，它会添加一行，当我们在该特定行中选择组合框时，它将覆盖文本框中的前一行值
我的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
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"
}]
});
答案 0 :(得分：1)
您不应修改$scope.product对象，而应使用row来存储所选值。在这里，我稍微修改了你的代码。
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 的
<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>