我试图将文本框中输入的值(即数量字段)与后端的动态值(AngularJs服务)进行比较。
这里我需要比较数量显示和文本框中输入的数量是否匹配,否则需要显示警告弹出窗口。
这是我的HTML
<div class="content pageup" ng-app="whApp">
<div id="project-dashboard" class="page-layout simple tabbed">
<!-- content stats here -->
<div class="page-content">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<nav class="breadcrumb">
<a class="breadcrumb-item" ui-sref="processOrders">Orders</a> <span
class="breadcrumb-item active">Raw Materials </span>
</nav>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home-tab-pane"
role="tabpanel" aria-labelledby="home-tab">
<!-- add user form -->
<div class="widget widget-7 card">
<div class="description bg-purble-custom-100">
<div class="description-text ">
<div class="row">
<div class="col-md-6">
<a href="../assets/pdf/001002135791.pdf" target="_blank">
<h5 class="text-white-500">
<span class="text-white-500 icon-format-page-break"></span>
Order Number :<b> {{processorderProdNumber}} HOSKOTE
PLANT </b>
</h5>
</a>
</div>
<div class="col-md-5 ">
<div class="filter1x">
<a href="../assets/pdf/001002135791.pdf" target="_blank"
data-toggle="tooltip" data-placement="left" title=""
data-original-title="Find the Order PDF"><i
class="text-white-500 s-9 icon-file-pdf"></i> </a>
</div>
</div>
<div class="col-md-1 "></div>
</div>
</div>
</div>
<div class="widget-content p-4">
<!-- the real content inside widger -->
<h5 class="subheading">Material Memo :
{{processOrderDetails[0].productTable.productDescription}}</h5>
<!-- table starts here -->
<!-- the real content inside widger -->
<!-- add user form ends here -->
<table id="sample-data-table" class="table table-striped">
<thead class="thead-dark"
style="background-color: #202528; color: white;">
<tr>
<th class="secondary-text">
<div class="">
<span class="column-title"># </span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class="column-title">Raw Material No.</span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class="column-title">Description</span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class="column-title">Type</span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class="column-title">Phase</span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class="column-title">Quantity.</span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class=""></span>
</div>
</th>
<th class="secondary-text">
<div class="">
<span class="column-title">Action</span>
</div>
</th>
</tr>
</thead>
<tbody ng-repeat="processOrderDetail in processOrderDetails">
<tr>
<th scope="row">{{$index+1}}</th>
<td>{{processOrderDetail.rawmaterialTable.rawmaterialNumber}}</td>
<td>{{processOrderDetail.rawmaterialTable.rawmaterialDescription}}</td>
<td>{{processOrderDetail.type}}</td>
<td>{{processOrderDetail.phase}}</td>
<td>{{processOrderDetail.quantity}}</td>
<td >
<div ng-if="processOrderDetail.rawmaterialTable.rawmaterialNumber != 5947 || processOrderDetail.rawmaterialTable.rawmaterialNumber != 5947">
<button type="button" ng-click="displayResult($event,processOrderDetail.rawmaterialTable.rawmaterialNumber)"
class="btn btn-icon fuse-ripple-ready">
<span class=" text-purble-custom-100 icon-plus-circle"></span>Add
</button>
</div>
</td>
<td><input ng-click="release(processOrderDetail)" onclick="this.style.color='#008000',this.value='RM Released',disabled ='disabled'" class="btn btn-secondary right fuse-ripple-ready"
type="button" value="Release" id="myButton1" />
<!-- <button type="button"
class="btn btn-secondary fuse-ripple-ready"
ng-click="release(processOrderDetail)" onclick="this.style.backgroundcolor = '#4caf50!important'; this.style.color='#000000'; this.disabled=true;" >Release</button>
-->
</td>
</tr>
</tbody>
</table>
<button type="button" data-toggle="modal"
data-target="#doneModal"
class="btn btn-secondary right fuse-ripple-ready" ng-show="showDone"
ng-click="done(processOrderDetails[0].processorderProd.processorderProdNumber)">Done</button>
<script type="text/javascript">
$('#sample-data-table').DataTable({
responsive: true
});
</script>
</div>
</div>
</div>
<script>
function remove(button)
{
//document.getElementById("sample-data-table").deleteRow(-1).innerHTML = '<td>1</td><td>2</td>';
$(button).closest("td").parent().remove();
}
</script>
</div>
</div>
</div>
<!-- content ends here -->
</div>
<script type="text/javascript"
src="../assets/js/apps/dashboard/project.js"></script>
</div>
点击Add +按钮,新行包含BatchNumber,Location和Qty字段。 我有兴趣将数量与输入的数量之和进行比较。 例如,如果Quantity = 600和Sum(Qty)= 600(100 + 100 + 400),它们应该没有警告或弹出,如果这不匹配则Popup应该来。
这是我的控制器
$scope.displayResult = function($event, rmId) {
console.log("************");
// console.log(button);
console.log(rmId);
var btn = $event.currentTarget;
console.log("************");
$(btn)
.closest("tbody")
.append(
'<tr><td><label for="inputPassword1" class="label-custom">Batch Number</label><input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required ></td><td><label for="inputPassword1" class="label-custom">Location</label> <input type="text" id="location" class="location form-control md-has-value" required ></td> <td ><label for="inputPassword1" class="label-custom">Qty</label> <input type="text" id="qty" class="qty form-control md-has-value" required s></td><td ><label style="display:none;" for="inputPassword1" class="label-custom">Qty</label> <input style="display:none;" type="text" id="rawMaterialId" class="rawMaterialId qty form-control md-has-value" required value="'
+ rmId
+ '"></td><td><button type="button" class="btn btn-danger fuse-ripple-ready" onclick="remove(this);">- remove</button></td></tr> ');
// document.getElementById("appender").
};
$scope.done = function(processorderProdNumber) {
console.log("Calling Status Change");
/** *********** */
console.log("done method called");
var bacthNos = [];
var locations = [];
var qtys = [];
var rawMaterialIds = [];
var data = [];
$("#sample-data-table > tbody > tr").each(
function() {
var eachtr = $(this);
// console.log(eachtr)
var batchNumber = eachtr.find('.bacthNo')
.val();
var location = eachtr.find('.location')
.val();
var quantity = eachtr.find('.qty').val();
var rawMaterialId = eachtr.find(
'.rawMaterialId').val();
if (batchNumber != undefined) {
console.log("batchNo=>" + batchNumber
+ " & location=>" + location
+ " & qty=>" + quantity
+ " & rawMaterialId=>"
+ rawMaterialId);
// alert("batchNo=>"+batchNumber+" &
// location=>"+location+" &
// qty=>"+quantity+" &
// rawMaterialId=>"+rawMaterialId);
bacthNos.push(batchNumber);
locations.push(location);
qtys.push(quantity);
rawMaterialIds.push(rawMaterialId);
}
});
console.log(bacthNos);
console.log(locations);
console.log(qtys);
console.log(rawMaterialIds);
// console.log("sadsadasdsasadsad");
for (var i = 0; i < bacthNos.length; i++) {
data[i] = {};
data[i].batchNumber = bacthNos[i];
data[i].location = locations[i];
data[i].quantity = qtys[i];
data[i].rawMaterialId = rawMaterialIds[i];
}
/** *********** */
console.log(data);
var convertData = [];
for (var i = 0; i < data.length; i++) {
var outerData = data[i];
convertData[i] = {};
// checkContains
if ($scope.checkContains(convertData,
outerData.rawMaterialId)) {
continue;
}
var batchStr = "";
var qtyStr = "";
var locationStr = "";
for (var j = 0; j < data.length; j++) {
var innerData = data[j];
if (outerData.rawMaterialId == innerData.rawMaterialId) {
batchStr += innerData.batchNumber + ",";
locationStr += innerData.location + ",";
qtyStr += innerData.quantity + ",";
}
}
convertData[i].rawMaterialId = outerData.rawMaterialId;
convertData[i].batchNumber = batchStr.substring(0,
batchStr.length - 1);
convertData[i].location = locationStr.substring(0,
locationStr.length - 1);
convertData[i].quantity = qtyStr.substring(0,
qtyStr.length - 1);
}
convertData = convertData.filter(function(x) {
if (JSON.stringify(x) === '{}') { // This will
// check if the
// object is
// empty
return false;
} else
return true;
});
欢迎任何更正和建议。谢谢。