当前位置: 首页 > 面试题库 >

AngularJS-如何使用ng-repeat构建自定义过滤器以有条件地返回项目

白飞飙
2023-03-14
问题内容

我有一个ng-repeat打印列表项。我想编写一个自定义过滤器,以便仅在条件为true时才打印列表项。

我似乎结构有误,因为似乎变量没有传递给过滤器。

index.php

<div ng-show="userDetails.username" class="nav">
    <p>Menu</p>
    <li ng-repeat="menuItem in menu | matchAccessLevel:$rootScope.userDetails.accessLevel:menuItem.minAccess | orderBy:'position' ">
        <a ng-href="/angular-app/app/{{menuItem.id}}">{{menuItem.name}}</a>
    </li>
</div>

app.js

userApp.filter('matchAccessLevel', function() {
    return function( item, userAccessLevel, minAccessLevel ) {
        if( userAccessLevel >= minAccessLevel ) {
            return item;
        }
    }
});

问题答案:

过滤器无法处理数组中的单个项目,它们会将整个数组转换为另一个数组。

userApp.filter('matchAccessLevel', function() {
  return function( items, userAccessLevel) {
    var filtered = [];
    angular.forEach(items, function(item) {
      if(userAccessLevel >= item.minAccess) {
        filtered.push(item);
      }
    });
    return filtered;
  };
});

看到这个plnkr

*始终检查函数的参数。值并不总是很明显。

请参阅过滤器指南



 类似资料:
  • 问题内容: 我是AngularJS的新手,我正在构建一个小型的概念验证租车清单应用程序,该应用程序会提取一些JSON,并通过ng- repeat并使用几个过滤器来呈现这些数据的各个部分: 现在,我想在控制器中创建一个自定义过滤器,该过滤器可以迭代ng-repeat中的项目,并仅返回满足特定条件的项目-例如,我可以根据哪个“ provider”复选框创建值数组进行检查,然后评估每个ng-repeat

  • 问题内容: 我有一个简单的导航对象设置,其中列出了导航项(以及它们是否应出现在主导航中)。看来,当我尝试将ng-if与ng- repeat混合使用时,情况会分崩离析,但是当我将ng-show与ng- repeat混合使用时,它可以正常工作(但是最后我得到了一堆隐藏的元素,但我没有想要附加到DOM)。 但是以下操作无效(请注意,现在是): 路线对象看起来像 尝试使用时收到以下错误: 错误:多个指令[

  • 问题内容: 我正在尝试做类似的事情: AngularJs部分: 但是不知何故,它向我展示了所有物品。如何筛选(键,值)? 问题答案: Angular 过滤器只能通过angular的API应用于数组,而不能应用于对象- “从数组中选择项的子集,并将其作为新数组返回。” 您在此处有两个选择: 1)移至数组或 -2)预过滤项目,如下所示: 并在控制器上: jsfiddle :http : //jsfid

  • 因此,我一直在努力研究如何构建一种方法,使用用户输入过滤大量wordpress帖子。我不太确定我是否理解如何让它发挥作用。我会简单地解释我目前所知道的,也许有人能给我指出正确的方向。 所以我知道我可以使用wp_query($args)函数来查询我的数据库,并将我想要的过滤参数传递给它,以获得我想要的结果。现在,因为它必须由用户完成,我想我可以添加一个html表单,这样做 然后我写了如下的php代码

  • 问题内容: 我想在Angular中使用ng-repeat,而我只想输出数组的某些元素。一个例子: 但是,这不起作用。请告诉我该怎么做;仅输出元素的精确索引。 问题答案: 在您的代码中,过滤器应用于“ items”数组,而不是应用于每个数组项,这就是为什么它无法按预期工作的原因。 相反,您可以使用ng-show(或ng-if): 请参阅:http://jsfiddle.net/H7d26 编辑:如果

  • 问题内容: 您将如何遍历map中的条目,以便可以同时输入条目键和值?例如,我想做这样的事情: 问题答案: 从文档中,我发现此语法有效: