HTML表格行中的数组消息中没有项目

时间:2016-01-24 21:59:41

标签: angularjs angularjs-directive

我有一个表从dataService.js文件接收数据,然后遍历数组中的每个员工并创建一个新行来显示员工。现在我设置为显示一条消息,如果没有雇用员工,但是它显示在表格上方,如果没有找到,我还想在表格中继续这样做。

我需要做些什么才能纠正我犯的错误?

<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>

更新

其他人都知道为什么它会出现在我的桌子上面吗?

<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>

1 个答案:

答案 0 :(得分:1)

如果使用有效的html,应该可以正常工作。浏览器将踢出无效的html并将其显示在找到它之外

文字无法直接插入<tr>。使用<td>

<tr ng-if="employeeList.length === 0"><td colspan="6">No employees hired.</td></tr>