how to display table data in ng repeat on button click event using web api stored procedure in angularjs asp.net
receipt.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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="https://getbootstrap.com/favicon.ico">-->
<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:'medium'}}</div>
<!--<div class="day">
<div class="">Wednesday</div>
<div class=""> May 29,2019</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" href="#">{{username}}</a>
</li>
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">
<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>
<!--<img class="mr-3" src="../../Styles/css/bootstrap-outline.svg" alt="" width="48" height="48">-->
<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">
<!--<input class="form-control mr-sm-2" placeholder="Search" aria-label="Search" type="text">-->
<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"></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 ">Waiting for Payment </h6>
{{Selectedinvoice.title}}
<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>Numbers</td>
<td>Pallet Capacity</td>
<td>No. Of Pallets</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="id in ids">
<td>{{$index + 1}}</td>
<td>{{id.PartNo}}</td>
<td>{{id.PartName}}</td>
<td>{{id.Numbers}}</td>
<td>{{id.PalletCapacity}}</td>
<td>{{id.NoOfPallets}}</td>
</tr>
</tbody>
</table>
</section>
<div class="float-left listing-zero_cancellation font11 ">
</div>
<div class="float-right">
<button type="button" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
receipt.js :
/// <reference path="dashboard.js" />
/// <reference path="dashboard.js" />
var app = angular.module('AngulardateApp', ['ngStorage', 'angucomplete-alt']);
app.controller('datectrl', function ($scope, $sessionStorage, $http, $window) {
$scope.currentdate = new Date();
alert($scope.currentdate);
//$scope.timeNow = $filter('currentdate')(currentdate, 'hh:mm');
//$scope.today = Date.now();
var user = JSON.parse($sessionStorage.SessionMessage.replace('[', '').replace(']', ''));
user.username = user.username.substring(0, 1).toUpperCase() + user.username.substring(1, user.username.length);
$scope.username = user.username;
alert($scope.username);
$scope.warehouse = 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);
alert($scope.warehouse);
//console.log($scope.warehouse);
//var user = JSON.parse($sessionStorage.SessionMessage);
//$scope.username = user.username;
});
get.error(function (d, status) {
$window.alert(d.Message);
});
$scope.isVisible = false;
$scope.Search = function () {
debugger;
$scope.mydata = {};
$http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetInvoiceDetails?invoiceno=" + $scope.warehouse.invoiceno + "")
.then(function (response) {
$scope.mydata = JSON.parse(response.data);
angular.forEach($scope.mydata, function (item) {
//alert(item.empid);
angular.forEach($scope.mydata, function (item) {
if (item.invoiceno == $scope.warehouse.invoiceno)
alert("stat");
stat = "true";
$scope.isVisible = true;
//$sessionStorage.SessionMessage = $scope.user.username;
});
$scope.warehouse.invoiceno;
})
});
};
$scope.warehouse = {
"invoiceno": ""
};
});
