How to get and display values below after clicking on a value in the textbox dropdown from the database in angularjs?
After clicking on the selected value, its corresponding invoice no and invoice id is getting display, but the selected value's table data is not getting displayed.
Here, after selecting a value from the textbox dropdown, it must directly display the values of the selected value from the database without clicking on the search button.
receipt.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.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">
<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" autofocus></div>
<button class="btn btn-secondary my-2 my-sm-0" type="submit" ng-click="Search()">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="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>
receipt.js :
//to select and display the selected invoice number details
$scope.mydata = {};
$scope.Search = function () {
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetInvoiceDetails?invoiceno=" + $scope.Selectedinvoice.originalObject.InvoiceNo + "")
.then(function (response) {
debugger;
$scope.isVisible = true;
$scope.mydata = JSON.parse(response.data);
});
};
I also have referred some link :
