布尔型的ng-repeatfilter

我正在尝试在ng-repeat中对布尔值进行过滤。

未注册用户列表:

<h3>Unregistered Users</h3> <div ng-repeat="user in users | filter:!user.registered"> <div class="row-fluid"> <div class="span2"> {{user.name}} </div> </div> </div> 

注册用户列表:

  <h3>Registered Users</h3> <div ng-repeat="user in users | filter:user.registered"> <div class="row-fluid"> <div class="span2"> {{user.name}} </div> </div> </div> 

有没有一个很好的方法来过滤基于注册和!注册。

5 Solutions collect form web for “布尔型的ng-repeatfilter”

按obj过滤expression式:

 <h3>Unregistered Users</h3> <div ng-repeat="user in users | filter:{registered:false}"> <div class="row-fluid"> <div class="span2"> {{user.name}} </div> </div> </div> 

JSFiddle: http : //jsfiddle.net/alfrescian/9ytDN/

在控制器中创build一个方法,根据您需要的逻辑返回true或false,并在filter中指定该函数。

像这样的东西:

 $scope.isRegistered = function(item) { return item.registered; }; <h3>Unregistered Users</h3> <div ng-repeat="user in users | filter:!isRegistered "> <div class="row-fluid"> <div class="span2"> {{user.name}} </div> </div> </div> 

如果某个项目没有设置布尔属性,则可以通过使用'!'来查找属性未设置为true的项目。 用引号。 filter:{property:'!'+ true}。

例:

 $scope.users = [ { name : 'user1 (registered)', registered : true }, { name : 'user2 (unregistered)' }, { name : 'user3 (registered)', registered : true }, { name : 'user4 (unregistered)' } 

要获取未注册的用户filter:

 <h3>Unregistered Users</h3> <div ng-repeat="user in users | filter:{registered:'!'+true}"> <div class="row-fluid"> <div class="span2"> {{user.name}} </div> </div> </div> 

有同样的问题。 Alfrescian解决scheme在Angular 1.1.5上不适合我。

find这个小提琴: http : //jsfiddle.net/buehler/HCjrQ/

 .filter('onlyBooleanValueFilter', [function(){ return function(input, param){ var ret = []; if(!angular.isDefined(param)) param = true; angular.forEach(input, function(v){ // 'active' is a hard-coded field name if(angular.isDefined(v.active) && v.active === param){ ret.push(v); } }); return ret; }; }]) 

您需要根据您的字段调整filter的代码。

稍微修改Websirnik的答案,这允许任何列名称的数据集:

 .filter('onlyBooleanValueFilter', [function () { return function (input, column, trueOrFalse) { var ret = []; if (!angular.isDefined(trueOrFalse)) { trueOrFalse = false; } angular.forEach(input, function (v) { if (angular.isDefined(v[column]) && v[column] === trueOrFalse) { ret.push(v); } }); return ret; }; }]) 

标记:

 <div repeat="row in your.dataset | onlyBooleanValueFilter: 'yourColumn' : true"> ...your stuff here.... </div> 
  • 如何$观看由ng-repeat创build的模型的更改?
  • angularjs ng-style:background-image不起作用
  • 如何用Angular.js实现分页/表格布局?
  • 指令在AngularJS中用ng-repeat范围隔离范围
  • AngularJS:列出所有表单错误
  • 如何使用TypeScript Controller&Angular Js绑定数据
  • angular度改变延迟
  • 在表内的行上使用ng-repeat和ng-class
  • AngularJS - 如何引用ng-Repeat中的属性名称
  • Angular JS Scaling&Performance
  • angularjs文本区字符计数器