I have a page which has a textbox invoice no, displaying invoice no based on the textbox entry, total pallets and total numbers.
On page load, it displays some data in a table format with its corresponding invoice no, total pallets calculated from the no. of pallets and total numbers calculated from numbers.
When the user enters an input and select the input based on textbox autocomplete, invoice number changes and the table data also changes accordingly, but the total pallets and total numbers also changes, but the previous data is available as it is. So, I want to hide the previous data and display the new data
receipt.js :
var app = angular.module('AngulardateApp', ['angucomplete-alt']);
app.controller('datectrl', function ($scope, $http, $window) {
//to display date and time
$scope.currentdate = new Date();
//to get all invoices and display it in autocomplete autobox
$scope.warehouse = null;
$scope.Selectedinvoice = null;
var get = $http({
method: "GET",
url: "http://stagingserver:85/EBSApi/api/Warehouse/GetAllInvoices",
dataType: 'json',
d: {},
headers: { "Content-Type": "application/json" }
});
get.then(function (d, status) {
$scope.warehouse = JSON.parse(d.data);
});
get.error(function (d, status) {
$window.alert(d.Message);
});
//to select and display the selected invoice number details and its total pallets and nos.
$scope.item;
$scope.mydata = null;
$scope.tdata = null;
$scope.Search = function () {
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetInvoiceDetails?invoiceno=" + $scope.Selectedinvoice.originalObject.InvoiceNo + "")
.then(function (response) {
debugger;
$scope.mydata = JSON.parse(response.data);
});
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetTotalQuantity?invoiceno=" + $scope.Selectedinvoice.originalObject.InvoiceNo + "")
.then(function (response) {
debugger;
$scope.tdata = JSON.parse(response.data);
$scope.tdata.TotalQty = $scope.tdata[0].TotalQty;
$scope.tdata.TotalPallets = $scope.tdata[0].TotalPallets;
});
};
//to display the invoice no and id on page redirect
$scope.Selectedinvoice = null;
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetInvoiceProperties")
.then(function (response) {
debugger;
$scope.Selectedinvoice = JSON.parse(response.data);
$scope.Selectedinvoice.InvoiceNo = $scope.Selectedinvoice[0].InvoiceNo;
$scope.Selectedinvoice.InvoiceId = $scope.Selectedinvoice[0].InvoiceId;
})
//to display the total no. of pallets and quantity
$scope.item = null;
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetTotalPallets")
.then(function (response) {
debugger;
$scope.item = JSON.parse(response.data);
$scope.item.TotalQty = $scope.item[0].TotalQty;
$scope.item.TotalPallets = $scope.item[0].TotalPallets;
})
//to display the details of the invoice based on invoice id and no (refer above code block)
$scope.mydata = {};
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetPendingDetails")
.then(function (response) {
debugger;
$scope.mydata = JSON.parse(response.data);
});
$scope.isVisible = true;
//logout function
$scope.logout = function () {
$scope.username = '';
window.location.href = 'http://stagingserver:85/EBSAjs';
}
//not working
$scope.btntext = "Submit";
});
receipt.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<script>document.write('<base href="' + document.location + '" />');</script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script src="../../Scripts/angucomplete-alt.js"></script>
<link href="../../Styles/angucomplete-alt.css" rel="stylesheet" />
<script src="../../Scripts/AngularController/receipt.js"></script>
<link rel="icon" href="../../Styles/font-awesome/logo1.png">
<link rel="stylesheet" href="../../Styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<title>Zetek EBS</title>
<link href="../../Styles/css/bootstrap.css" rel="stylesheet">
<link href="../../Styles/css/offcanvas.css" rel="stylesheet">
</head>
<body class="bg-light">
<div ng-app="AngulardateApp" ng-controller="datectrl">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-tek">
<a class="navbar-brand mr-auto mr-lg-0" href="#">ZETEK EBS</a>
<div class="dtd">
<div class="day">{{currentdate | date:"hh"}}:{{currentdate | date:"mm"}} <span>{{currentdate | date:"a"}}</span></div>
<div class="day2">
<div class="">{{currentdate | date:"EEEE"}}</div>
<div class="">{{currentdate | date:"mediumDate"}}</div>
</div>
</div>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"></div>
<ul class="navbar-nav px-3">
<!--<li class="nav-item text-nowrap">
<a class="nav-link active">{{username}}</a>
</li>-->
<li class="nav-item text-nowrap active ">
<a class="nav-link" href="#" ng-click="logout()">
<i class="fas fa-sign-out-alt"></i>
</a>
</li>
</ul>
</nav>
<div class=" nav-scroller bg-tek2 shadow-sm">
<nav class=" container nav nav-underline">
<a class="nav-link active" href="#">Warehouse</a>
<a class="nav-link" href="#">
Receipt
<span class="badge badge-pill bg-light align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">
Issue
<span class="badge badge-pill bg-light align-text-bottom">12</span>
</a>
</nav>
</div>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-tekgreen rounded shadow-sm">
<i class="mr-3 fas fa-warehouse" style="font-size:xx-large;"></i>
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">Warehouse Receipt</h6>
<small>Zetek</small>
</div>
<form class="form-inline my-2 my-lg-0 ml-auto">
<div angucomplete-alt id="txtinvnumber" placeholder="Search Invoice" pause="100"
selected-object="Selectedinvoice" local-data="warehouse" search-fields="InvoiceNo"
title-field="InvoiceNo" minlength="1" input-class="form-control mr-sm-2" match-class="highlight"
ng-click="Search()"></div>
<!--<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>-->
</form>
</div>
<div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Invoice Number : {{Selectedinvoice.originalObject.InvoiceNo}}{{Selectedinvoice.InvoiceNo}}
<span class="hi"> Total No. Of Pallets : {{tdata.TotalPallets}}{{item.TotalPallets}}</span>
<span class="float-right"> Total Numbers : {{tdata.TotalQty}}{{item.TotalQty}} </span>
<!--<span class="float-right">Invoice Id : {{Selectedinvoice.originalObject.InvoiceId}}{{Selectedinvoice.InvoiceId}}</span>--></h6>
<br>
<div class="c-listing_row_append clearfix" style="border-bottom:2px solid #7ed321; padding: 20px;">
<section class="table-responsive">
<table class="table table-hover" ng-show="isVisible">
<thead>
<tr>
<td>Serial No</td>
<td>Part No</td>
<td>Part Name</td>
<td>No. Of Pallets</td>
<td>Pallet Capacity</td>
<td>Numbers</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="items in mydata">
<td>{{$index + 1}}</td>
<td>{{items.PartNo}}</td>
<td>{{items.PartName}}</td>
<td>{{items.NoOfPallets}}</td>
<td>{{items.PalletCapacity}}</td>
<td>{{items.Numbers}}</td>
</tr>
</tbody>
</table>
</section>
<div class="float-left listing-zero_cancellation font11">
</div>
<div class="float-right">
<input type="submit" class="btn btn-primary btn-sm" value="{{btntext}}" ng-click="submit()">
</div>
</div>
</div>
</main>
</div>
</body>
</html>
