布尔值上的 ng-repeat 过滤器

Posted 2023-02-27

【中文标题】布尔值上的 ng-repeat 过滤器

【英文标题】：ng-repeat filter on boolean

【发布时间】：2013-07-13 09:52:57

【问题描述】：

我正在尝试过滤 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>

有没有一种好的方法可以根据已注册和 !registered 进行过滤。

【参考方案1】：

按 obj 表达式过滤：

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

【讨论】：

当我用 AngularJS 1.2 尝试这个时，如果我引用它，错误表达式只会正确计算：filter:registered:'false'

看起来它现在在 1.2.2 中根本不起作用（字符串化与否），任何人都可以确认？编辑：没关系，我的问题在于对象迭代的过滤器

对于嵌套对象，语法从 1.2 更改为 1.3，请参阅此答案 ***.com/a/28160037/595152

【参考方案2】：

在控制器中创建一个方法，根据您需要的逻辑返回真或假，并在过滤器中指定该函数。

类似这样的：

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

【讨论】：

item 应该来自哪里？

@ZJRollyson item 是过滤方法idRegirstered(item) 的参数。通过将 user 对象传递给 filter 方法并评估布尔返回值来进行过滤。

无法反转过滤方法。您必须像这样在过滤器方法中进行反转：$scope.isUnregistered = function(item) return !item.registered ; ; 并像这样使用它filter: isUnregistered

【参考方案3】：

如果项目没有设置布尔属性，您可以使用“！”找到属性未设置为 true 的项目带引号。前任。过滤器：property:'!'+true。

例子：

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

获取未注册用户过滤器：

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

【参考方案4】：

有同样的问题。 Alfrescian 解决方案在 Angular 1.1.5 上对我不起作用。

找到这个小提琴：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;
    ;
])

您需要根据您的字段调整过滤器的代码。

【参考方案5】：

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