How to sql server bind the data in table after table selected row data get in angularjs
<div ng-app="myApp" ng-controller="myCntrl">
<center>
<table>
<tr>
<%--<td>
<div class="col col-lg-8">
<span>Start Date
<input class="form-control" type="date" min="" id="StDate" ng-model="fromdate" required /></span>
</div>
</td>
<td>
<div class="col col-lg-8">
<span>End Date
<input class="form-control" type="date" min="" id="toDate" ng-model="todate" required /></span>
</div>
</td>--%>
<td>
<span>Start Date :
<input type="text" id="txtfromdate" ng-model="fromdate" />
<%-- <span style="color:red" ng-show="formpay.txtfromdate.$error.required">
Please Enter the StartDate</span>--%>
</td>
<td>
<span>To Date :
<input type="text" id="txttodate" ng-model="todate" />
</td>
<td>
<input type="button" id="btnFillProducts" value="Fill Products" ng-click="fillProductList()" />
</td>
</tr>
</table>
<br />
<table class="grid" id="gnpayment" runat="server" >
<thead>
<tr>
<th></th>
<th>
S.No.
</th>
<th>
Stud id
</th>
<th>
Student Nname
</th>
<th>
Trackid
</th>
<th>
Crbillno
</th>
<th>
Txnid
</th>
<th class="auto-style5">
Date
</th>
<th class="auto-style2">
Bank_txn
</th>
<th class="auto-style6">
Withoutcharges
</th>
<th class="auto-style1">
Withcharges
</th>
<th class="auto-style2">
Paymentmode
</th>
<th class="auto-style4">
Result
</th>
<th>
TransactionType
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in ProductList" ng-class="{'selected':Product.Stud_id == selectedRow}" ng-click="setClickedRow(Product.Stud_id)">
<td>
<button type="button" data-toggle="modal" data-target="#myModal" ng-click="GetCoursedetails()">Open Modal</button>
</td>
<td>
{{$index +1}}
</td>
<td >
{{product.Stud_id}}
</td>
<td>
{{product.stud_name}}
</td>
<td>
{{product.Trackid}}
</td>
<td>
{{product.Crbillno}}
</td>
<td>
{{product.Txnid}}
</td>
<td >
{{product.Transactiondate}}
</td>
<td >
{{product.Banktxn}}
</td>
<td>
{{product.withoutcharges}}
</td>
<td>
{{product.withcharges}}
</td>
<td>
{{product.Paymentmode}}
</td>
<td>
{{product.Result}}
</td>
<td>
{{product.TransactionType}}
</td>
</tr>
</tbody>
<tr>
</tr>
</table>
</center>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Payment.js"></script>
<h1>You selected: {{product.Crbillno}}</h1>
</div>
JavaScriptcode:
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
$scope.ProductList;
$scope.selectedRow = null;
$scope.fillProductList = function () {
var httpreq = {
method: 'POST',
url: 'Payment_etails.aspx/GetProductList',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { fromdate: $scope.fromdate, todate: $scope.todate }
}
$http(httpreq).success(function (response) {
$scope.ProductList = response.d;
$scope.ProductsItems = [{
Stud_id: response.d,
stud_name: response.d.stud_name
}];
$scope.setClickedRow = function (stud_name) {
$scope.ProductList = stud_name;
}
})
};
});
Result: