Angularjs过滤器不能处理ng-if条件的值

Angularjs filter not working on value coming from ng-if condition

本文关键字：条件 ng-if 处理 过滤器 不能 Angularjs      更新时间：2023-09-26

我使用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

模型将在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;
    }) 
  }
});
<<p> 视图/strong> 
<input ... data-ng-if="form.x>5" destroy-y .../>
演示

谢谢你的努力，但我找到了一个更好的解决方案。

我发现角过滤器将只对通过角定义的变量渲染的值工作，这也是一个问题，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>

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

相关文章：