I am currently developing a web application using MVC5 and AngularJS. The main component of my app is a table.
<div class="table-responsive scroll" ng-hide="hidetable">
<table id="table" class="table table-bordered table-condensed">
<thead>
<tr class="bg-primary">
<th><a href="#" class="erp-tb-a" ng-click="order('date')">Date</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('day')">Day</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('brandname')">BrandName</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('zone')">Zone</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('location')">Location</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('area')">Area</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('trainer')">TrainerName</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('program')">Program</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('trainingno')">Training Id</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('amount')">Amount</a></th>
<th><a href="#" class="erp-tb-a">Remark</a></th>
<th><a href="#" class="erp-tb-a" ng-click="order('sonvinid')">SonvinId</a></th>
<th><a href="#" class="erp-tb-a" ></a>Add</th>
</tr>
<tr class="bg-primary">
<td><input type="text" class="erp-input" ng-model="search.date" /></td>
<td><input type="text" class="erp-input" ng-model="search.day" /></td>
<td><input type="text" class="erp-input" ng-model="search.brandname" /></td>
<td><input type="text" class="erp-input" ng-model="search.zone" /></td>
<td><input type="text" class="erp-input" ng-model="search.location" /></td>
<td><input type="text" class="erp-input" ng-model="search.area" /></td>
<td><input type="text" class="erp-input" ng-model="search.trainer" /></td>
<td><input type="text" class="erp-input" ng-model="search.program" /></td>
<td><input type="text" class="erp-input" ng-model="search.trainingno" /></td>
<td><input type="text" class="erp-input" ng-model="search.amount" /></td>
<td><input type="text" class="erp-input" /></td>
<td><input type="text" class="erp-input" ng-model="search.sonvinid" /></td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in getallcompany | orderBy:predicate:reverse | filter:search">
<td>{{p.date}}</td>
<td>{{p.day}}</td>
<td>{{p.brandname}}</td>
<td>{{p.zone}}</td>
<td>{{p.location}}</td>
<td>{{p.area}}</td>
<td>{{p.trainer}}</td>
<td>{{p.program}}</td>
<td>{{p.trainingno}}</td>
<td>{{p.amount}}</td>
<td><input type="text" class="erp-input" style="width:90%; border:1px solid black;" ng-model="mdremarks" /></td>
<td>{{p.sonvinid}}</td>
<td><md-checkbox tabindex="0" area-label="none" role="checkbox" ng-click="clickcheckbox()"></md-checkbox></td>
</tr>
</tbody>
</table>
<div style="margin-bottom:20px">
<a href="#" style="cursor:pointer;" class="btn btn-primary active">Generate Bill</a>
<a href="#" style="cursor:pointer;" class="btn btn-warning active">Back</a>
</div>
</div>
Here's the scenario I'm dealing with regarding the visibility of the table:
ng-hide="hidetable"
If the table is empty, meaning no rows are returned from the SQL query, it should be hidden. If there are rows returned, the table should be displayed.
var app = angular.module('myapp', ['ngMaterial']);
app.controller('mycontroller', function ($scope, $http) {
$scope.hidetable = true;
In my controller, I've initially set the table to be hidden on page load.
$http.get('/freezeservice.asmx/gettabledetails', {
params: {
log: log,
pm: pm,
comname: $scope.mdcompany,
mm: $scope.datemm,
yy: $scope.dateyy
}
})
.then(function (response) {
{
$scope.getallcompany = response.data.info;
}
});
This is how I retrieve the data for populating the table.
Your assistance would be greatly appreciated.