Question

我正在使用带有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根据我将获得的数据只渲染一个值，但这会导致我的过滤器出现问题。我的手指在所有领域工作，但是当我试图过滤最后一个单元格内容时它不起作用。

我缺少什么让过滤器处理使用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

Answer 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>

现在它的工作非常好。谢谢！

Angularjs过滤器无法处理来自ng-if条件的值

2 个答案: