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

【问题标题】：Angularjs filter not working on value coming from ng-if conditionAngularjs过滤器不适用于来自ng-if条件的值
【发布时间】：2016-10-13 12:24:44
【问题描述】：

我正在使用带有 ng-model 的 angularjs 搜索框将其用作我渲染表的搜索值。

<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 根据我将获得的数据仅呈现一个值，但这会给我的过滤器带来问题。我的 finter 在所有领域都工作，但是当我试图过滤最后一个单元格内容时它不起作用。

我缺少什么让过滤器在使用ng-if 渲染的元素上工作

【问题讨论】：

你可以试试这个<td>{{item.status == '1' ? "Success" : "Pending" }}</td>，而不是改变整个跨度
将ng-ifs 包裹在两个<td> 周围而不是在里面怎么样？
@JunaidSalaat 它仍然无法正常工作
作为一个测试，你能不能把ng-if换成ng-show？
@KScandrett 感谢我找到解决方案并发布答案的努力。

标签： javascript angularjs filter

【解决方案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

【讨论】：

【解决方案2】：

感谢所有的努力，但我找到了更好的解决方案。

我发现角度过滤器仅适用于通过角度定义的变量呈现的值，这也是ng-if 会破坏ng-model 的问题，因此过滤器在我的情况下不起作用。

所以我只在控制器中通过ng-if 检查值

api.getData('/wibmo/transactions/'+sessionStorage.client_id,header,'',function(error,data){
    console.log(error,data);
    if(data)
    {
        $scope.transactions = data.result.entities;
        $scope.showLoader = false;
        $scope.transactions.forEach(function(item,index){
            if(item.status=='0'){
                $scope.transactions[index].status = 'Pending'
            } else {
                $scope.transactions[index].status = 'Success'
            };
        });
    }

});

在这段代码中，我覆盖了我通过 api 获得的数据，而在我的 html 中，我只是打印了这样的值

<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>{{item.status}}</td>
</tr>

它现在工作得很好。谢谢！

【讨论】：