将 ng-if 添加到 table 中的列会移除对 angular 中该列进行排序和筛选的能力

Question

我正在使用 ng-repeat 创建 table 数据，我还想对某些列进行排序和过滤。我的一切都很好。
但是，我有不同的网站用户，有些用户应该看到的 'client' 列，而其他人则不应该看到（因为他们会看到 pre-filtered）。因此，我向该 header 和数据列添加了一个 ng-if，但在这样做之后，当它显示时，我无法再按该列进行排序或过滤。所以我的问题是，为什么将 ng-if 添加到该列不允许我按它进行过滤或排序？

代码如下：

<div class="tableScrollWrapper" keep-scroll-pos>
<table class="table table-striped-blue table-hover">
  <thead fix-head>
    <form>
    <tr>
      <th ng-if="clientsToView == 'All'" class="paddingLeft20"><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Client" class="form-control" ng-model="clientFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Priority" class="form-control" ng-model="priorityFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Company Name filter" class="form-control" ng-model="nameFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Town" class="form-control" ng-model="townFilter"></div></div></th>
      <th><div class="form-group"><div class="input-group"><div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div><input type="text" placeholder="Postcode" class="form-control" ng-model="postcodeFilter"></div></div></th>
      <th></th>
      <th></th>
      <th class="paddingRight20"></th></tr>
      <tr>
        <th ng-if="clientsToView == 'All'" class="paddingLeft20"><a href="#" ng-click="orderByColumn = 'clientName'; reverseSort = !reverseSort; changeSort('clientName')">Client</a></th>
        <th><a href="#" ng-click="orderByColumn = 'priority'; reverseSort = !reverseSort; changeSort('priority')">Priority</a></th>
        <th><a href="#" ng-click="orderByColumn = 'name'; reverseSort = !reverseSort; changeSort('name')">Company Name</a></th>
        <th>Town</th>
        <th>Post Code</th>
        <th>Phone</th>
        <th>Company Note</th>
        <th class="paddingRight20"></th></tr></thead>
    <tr ng-repeat="company in data.companies | orderBy:orderByColumn:reverseSort | filter:{ clientName: clientFilter, name: nameFilter, town: townFilter, postcode: postcodeFilter } | filter : {priority: priorityFilter} : priorityFilterClear">
      <td ng-if="clientsToView == 'All'" class="paddingLeft20">{{company.clientName}}</td>
      <td><span ng-hide="company.priority == 100">{{company.priority}}<span></td>
      <td><a ui-sref="company({companyID : company.id})">{{company.name}}</a></td>
      <td>{{company.town}}</td>
      <td>{{company.postcode}}</td>
      <td>{{company.phone}}</td>
      <td>{{company.notes}}</td>
      <td class="paddingRight20"><a href="" ng-click="deleteCompany(company.id)"><span class="glyphicon glyphicon-trash marginRight10"></span></a></td></tr>
</table></div>

Answer 1

ng-if 在这种情况下将不起作用，因为它 removes 来自 dom 的 element 而不是隐藏它，其次 ng-if 创建 new child scope 这可能是您的问题的原因。使用 ng-show/ng-hide

将 ng-if 添加到 table 中的列会移除对 angular 中该列进行排序和筛选的能力

Adding ng-if to a column in a table removes the ability to sort & filter on that column in angular

angularjs

angular-ng-if

angular-filters