javascript - Angularjs 过滤器不适用于来自 ng-if 条件的值

Question

我正在使用 angularjs 搜索框 ng-model使用它作为我渲染的表的搜索值。

<input type="text" class="form-control" ng-model="transSearch">

这是我的表格代码

<tbody>
    <tr dir-paginate="item in transactions | filter: transSearch | itemsPerPage: pageSize" current-page="currentPage" data-pending-success="item.status">
        <td><div class="checkbox"><label><!--<input type="checkbox" ng-checked="allCheck">--> {{item.txn_id}}</label></div></td>
         <td>{{item.client_txn_id}}</td>
         <td>{{item.name}}</td>
         <td>{{item.phone_no}}</td>
         <td>{{item.datetime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{item.amount}}</td>
        <td>{{item.client_cut}}</td>
        <td><span ng-if="item.status=='1'">Success</span><span ng-if="item.status=='0'">Pending</span></td>
    </tr>
</tbody>

可以在最后的表格中看到<td>我正在使用ng-if根据我将获得的数据仅呈现一个值，但这给我的过滤器带来了问题。我的查找器适用于所有字段，但是当我尝试过滤最后一个单元格内容时，它不起作用。

让过滤器对使用 ng-if 渲染的元素起作用，我缺少什么

Answer 1

模型将在 ng-if 中销毁，您可以使用 ng-show 或者下面还有一个解决方案..

您可以向与您设置 ng-if 的元素相同的元素添加另一个指令，这会从 $destroy 的范围中删除该属性:

指令

myModule.directive('destroyY', function(){
  return function(scope, elem, attrs) {
    scope.$on('$destroy', function(){
      if(scope.form.y) delete scope.form.y;
    }) 
  }
});

查看

<input ... data-ng-if="form.x>5" destroy-y .../>

DEMO