Question

我有一个ngTable如下。

我想根据角色使用ng-if隐藏第一个单元格。

当我添加ng-if时，td（单选按钮）的内容被正确隐藏但数据标题仍在屏幕上可见

是否可以完全隐藏td？

<table ng-table="tableParam" 
    class="table table-striped table-hover table-bordered list-table" id="tableList" 
    fixed-header >
         <tr ng-repeat="valuesList in $data">
             <td ng-if="role=='ADMIN'" data-title="'Select'">
                    <input type="radio" name="selectRadio" ng-model="selectRadio" ng-value="valuesList"  ></input>
             </td>
             <td data-title="'Start Date'">{{valuesList.startDate}}</td>
             <td data-title="'End Date'">{{valuesList.endDate}}</td>
         </tr>
</table>

Answer 1

我尝试使用plunkr重新创建问题，但无法重新创建问题： http://plnkr.co/edit/xJgzQCXTwBMcS5dptpYN?p=preview

我的申请可能有些问题，我无法识别。

我使用以下解决方案解决了这个问题:(应用ng-if到tr或div标签等而不是td）

item.idx

Answer 2

简而言之，你无法做到。因为标题部分是在表格被创建时创建的。但是，您可以这样做：

<table ng-table="tableParam" class="table table-striped table-hover table-bordered list-table" id="tableList" fixed-header>
  <thead>
    <tr ng-repeat="valuesList in $data">
      <th ng-if="role=='ADMIN'">a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="valuesList in $data">
      <td ng-if="role=='ADMIN'">
        <input type="radio" name="selectRadio" ng-model="selectRadio" ng-value="valuesList"></input>
      </td>
      <td>{{valuesList.b}}</td>
      <td>{{valuesList.c}}</td>
    </tr>
  </tbody>
</table>

Answer 3

请创建用于隐藏您内容的课程

<style>
 .hidden {
    display : none
 }
</style>

为您的ng-table

使用以下代码

<table ng-table="tableParam" class="table table-striped table-hover table-bordered list-table" id="tableList" fixed-header >
         <tr ng-repeat="valuesList in $data">
             <td ng-if="role=='ADMIN'" header-class="(role!='ADMIN') ? 'hidden' : ''" data-title="'Select'">
                    <input type="radio" name="selectRadio" ng-model="selectRadio" ng-value="valuesList"/>
             </td>
             <td data-title="'Start Date'">{{valuesList.startDate}}</td>
             <td data-title="'End Date'">{{valuesList.endDate}}</td>
         </tr>
</table>

在这里，我使用了隐藏类的条件，根据需要添加if role == 'Admin' than class apply否则可以工作

标题类将帮助您在ng-table和ng-if条件下隐藏标题，以隐藏数据。

希望它会起作用。

Answer 4

<table ng-table="tableParam" 
    class="table table-striped table-hover table-bordered list-table" id="tableList" 
    fixed-header >
         <tr ng-repeat="valuesList in $data">
             <td ng-if="role=='ADMIN'" data-title="'Select'">
                    <input type="radio" name="selectRadio" ng-model="selectRadio" ng-value="valuesList"  ></input>
             </td>
             <td ng-if="role=='ADMIN'" data-title="'Start Date'">{{valuesList.startDate}}</td>
             <td ng-if="role=='ADMIN'" data-title="'End Date'">{{valuesList.endDate}}</td>
         </tr>
</table>

这应该可以解决问题。如果您不想添加多个ng-if，请将<td>包裹在<tbody>内并在ng-if上应用<tbody>

隐藏具有数据标题的ngTable td

4 个答案: