I have a table that receives data from my dataService.js file and then loops through each employee in the array and creates a new row to display the employee. Right now I have it set up to display a message if no employees are hired yet however it shows it above the table and I would like to do it still as a row in the table if none are found.
What do I need to do to correct a mistake I'm making?
<table class="table table-striped table-bordered">
<tr>
<th>Employee Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
<th>Actions</th>
</tr>
<tr ng-if="employeeList.length === 0">No employees hired.</tr>
<tr ng-repeat="employee in employeesList track by $index">
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeStreet}}</td>
<td>{{employee.employeeCity}}</td>
<td>{{employee.employeeState}}</td>
<td>{{employee.employeeZipCode}}</td>
<td><span ng-click="deleteEmployee(employee)" class="glyphicon glyphicon-remove"></span>
</tr>
</table>
UPDATE
Anyone else know why its showing up above my table?
<table class="table table-striped table-bordered">
<tr>
<th>Employee Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
<th class="actions">Actions</th>
</tr>
<tr ng-if="employeeList.length === 0">
<td colspan="6">No employees hired.</td>
</tr>
<tr ng-repeat="employee in employeesList track by $index">
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeStreet}}</td>
<td>{{employee.employeeCity}}</td>
<td>{{employee.employeeState}}</td>
<td>{{employee.employeeZipCode}}</td>
<td><span ng-click="deleteEmployee(employee)" class="glyphicon glyphicon-remove"></span></td>
</tr>
</table>
