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

如何在ng-repeat中使用ng-if?TL; DR; 使用自定义过滤器

司寇安宜
2023-03-14
问题内容

我有一个简单的导航对象设置,其中列出了导航项(以及它们是否应出现在主导航中)。看来,当我尝试将ng-if与ng-
repeat混合使用时,情况会分崩离析,但是当我将ng-show与ng-
repeat混合使用时,它可以正常工作(但是最后我得到了一堆隐藏的元素,但我没有想要附加到DOM)。

   <section class="nav">
        <a  ng-repeat="(key, item) in route.routes"
            ng-href="{{key}}"
            ng-show="item.nav"
        >
                {{item.label}}
        </a>
    </section>

但是以下操作无效(请注意,ng-show现在是ng-if):

    <section class="nav">
    <a  ng-repeat="(key, item) in route.routes"
        ng-href="{{key}}"
        ng-if="item.nav"
    >
            {{item.label}}
    </a>
</section>

路线对象看起来像

routes: {
    '/home': { label: 'Home', nav: true },
    '/contact': { label: 'Contact', nav: false},
   // etc
}

尝试使用时收到以下错误ng-if

错误:多个指令[ngIf,ngRepeat]要求在以下位置进行包含:

我想这是想告诉我,我不能声明它是两次存在的声明。我可以ng-if在一个内部元素上使用,但是我想我最终还是会得到一堆空的外部a标签。


问题答案:

可能有更好的解决方案,但是在阅读了以上答复之后,您可以尝试制作自己的自定义过滤器:

angular.module('yourModule').filter('filterNavItems', function() {
  return function(input) {
    var inputArray = [];

    for(var item in input) {
      inputArray.push(input[item]);
    }

    return inputArray.filter(function(v) { return v.nav; });
  };
});

然后使用它:

<section class="nav">
    <a  ng-repeat="(key, item) in routes | filterNavItems"
        ng-href="{{key}}">
            {{item.label}}
    </a>
</section>

这是Plunker:http://plnkr.co/edit/srMbxK?p
= preview



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

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

  • 问题内容: 我正在开发一个页面,我需要在其中显示一些框(使用),其中包含频道信息以及显示位置(城市)。 我面临的问题是当我重复第二遍时: 这应该获得第一个ng-repeat的$ index值,并使用显示频道的位置创建一个新数组。它确实做到了。但是,当我使用此数组应用第二个ng- repeat时,它无法正常工作。 说我的html看起来像这样(PS:我需要使用索引值而不是因为我将这些框放到列中) JS

  • 我想比较一下id,这里,如果id等于5,做这个,否则做那个。我怎样才能做到这一点?

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

  • 问题内容: 我想知道Angular中是否有一种简单的方法,可以使用特定的列(而非逻辑)来过滤表。现在,当我的过滤器实际上只需要过滤2列数据(ID和Name)时,它就会搜索表中的所有内容(10列以上的数据)。 我设法使它仅在过滤时仅查看这两列(通过根据文档在过滤器表达式中使用一个对象并查看此SO答案,但是它使用的是逻辑,太具体了。我想让它使用逻辑,但是遇到了麻烦。 我的HTML 我的过滤逻辑: 过滤