Angularjs过滤器不能处理ng-if条件的值
Angularjs filter not working on value coming from ng-if condition
我使用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>
它现在工作得很好。谢谢!
相关文章:
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 在 ng-if 编译后访问指令中的 DOM 元素
- 通过ng-if设置隐藏文本框的值
- AngularJS ng-if指令在移除元素之前,即使条件为false,也会短暂呈现
- 即使条件已通过,ng if也不起作用
- Angular JS中ng-if表达式中条件单向绑定的语法
- Angularjs,在受限标记(如select或table)中使用条件标记(如ng-if)
- 使用ng-if/ng-show/ng-switch的Angular条件显示会简要地显示这两个元素
- 导航在ng-if条件下不工作
- 如何在元素指令上使用ng-if来有条件地调用模块
- 将$scope对象传递给ng-if和ng-class三元条件不工作
- 在angularJS中使用ng-if条件停止循环
- Angularjs过滤器不能处理ng-if条件的值
- Angular ng-if多个条件不工作
- 相同条件下的多个ng-if -性能方面
- 如何在Angular JS中使用ng-if条件隐藏选项值
- 如何在一个按钮中有一个ng-if双向条件
- 我应该重构 angularjs 中 ng-if 的多个条件吗?
- 带键值的ng-if条件