Question

我正在使用ng-repeat创建数据表，我还想对某些列进行排序和过滤。我已经完成了所有工作。

代码如下：

<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 element来自dom而不是隐藏它，其次ng-if创建new child scope这可能是您的问题的原因。使用ng-show/ng-hide

将ng-if添加到表中的列将删除排序和排序的功能。以角度过滤该列

1 个答案: