是否可以通过包含在另一个数组中来过滤 angular.js?

2024-01-21

所以如果我有一个数组:

$scope.letters = 
[{"id":"a"},
{"id":"b"},
{"id":"c"}];

还有另一个数组

$scope.filterBy = ["b","c","d"];

我想要一些 ng-repeat 来仅通过 $filterBy 中出现的项目来过滤 $scope.letters。

我希望能够做一些事情来达到以下效果:

<span ng-repeat="{{letter in letters|filter: letter.id in filterBy }} > {{letter.id}} </span>

并打印 b,c

我知道这是一个非常愚蠢的例子,但是有没有办法根据另一个数组对象的内容过滤 angular.js 表达式?


Update

这是一个角度模块(基于@InviS答案),可以在您的角度应用程序中轻松实现此过滤器:过滤器-inArrayFilter http://cyberdelphos.github.io/angular-inarray-filter/


这是基于 @InviS 答案的角度过滤器方法:

过滤器应该是这样的:

.filter('inArray', function($filter){
    return function(list, arrayFilter, element){
        if(arrayFilter){
            return $filter("filter")(list, function(listItem){
                return arrayFilter.indexOf(listItem[element]) != -1;
            });
        }
    };
});

where list是您要过滤的列表(此参数默认由 Angular 设置),数组过滤器是您用作过滤器的数组,并且element是要在列表中过滤的属性的名称。

要使用此过滤器,请使用 ng-repeat 作为:

<div ng-repeat='letter in letters | inArray:filterBy:"id"'>{{letter.id}}</div>

where inArray是过滤器,filterBy (此过滤器的第一个参数)是你要匹配的数组,并且"id" (第二个参数)是要与数组匹配的列表元素。

你可以试试这个活生生的例子 http://jsbin.com/owIXEPE/2/edit使用角度过滤器方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以通过包含在另一个数组中来过滤 angular.js? 的相关文章

  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • 传递数组时在 C 中的函数参数中强制指定数组大小

    Context 在 C 中 我有一个以数组作为参数的函数 该参数用作该函数的输出 输出的大小始终相同 我会 让阅读代码的人清楚所需的大小 不过它已经在函数注释中了 理想情况下 编译会输出警告或错误 这样我就可以在编译时而不是运行时防止出现问
  • 将 LongBuffer/IntBuffer/ShortBuffer 转换为 ByteBuffer

    我知道一种将 byte short int long 数组转换为 ByteBuffer 的快速方法 然后获取字节数组 例如 要将字节数组转换为短数组 我可以这样做 byte bArray 1 0 0 0 0 0 0 0 1 0 0 0 0
  • Ada:用可变大小的数组打包记录

    我正在寻找创建一个打包记录 它可以容纳长度从 5 50 个元素不等的数组 是否可以以这样的方式来完成此操作 以便可以在不浪费空间的情况下打包记录 当我去创建记录时 我会知道数组中有多少元素 the range of the array ty
  • 需要更快的数组复制

    经过一些阅读后 我发现在 java 中复制数组的方式存在一些差异 对于我的应用程序 我有一个递归节点树 每个节点都包含一个 2d 板数组 8x8 通过探查器测试 我能想到的最好的办法是 java util Arrays copyOf arr
  • 将指针设置为任意维度数组?

    当我想初始化多维数组时 我通常只使用指针 例如 对于二维我使用 double array 对于三个我使用 double array 但是 我想根据指示维度的命令行参数设置一个多维数组 一旦你有了一个具有你想要的维数的变量 有没有办法设置任意
  • 检查数组元素的大小是否相同

    有没有最好 最有效的方法来检查数组元素的大小是否相同 1 2 3 4 5 gt false 1 2 3 4 5 6 gt true 我有什么 def element of same size arr arr map size uniq si
  • JavaScript 数组中的空项和未定义项有什么区别? [复制]

    这个问题在这里已经有答案了 考虑以下 JavaScript 代码 在节点 REPL 中 gt let a new Array 10 undefined gt a lt 10 empty items gt gt a map e gt 1 lt
  • Angular 计算 HTML 中的百分比

    我试图在 HTML 中显示百分比值 如下所示 td myvalue totalvalue 100 td 它可以工作 但有时它会给出一个很长的小数 这看起来很奇怪 如何四舍五入到小数点后两位 有更好的方法吗 您可以使用过滤器 如下所示杰夫约翰
  • 根据对象内的值将对象数组分成两部分

    我一直在尝试 并努力 弄清楚如何根据键值对拆分对象数组 长话短说 我有一个火车正在停靠的车站列表 需要将之前的停靠点和未来的停靠点分开 我正在使用的数据如下所示 station code SOC station name Southend
  • 从 Redux 状态删除一个项目

    我想知道如果可能的话你是否能帮我解决这个问题 我正在尝试从 Redux 状态中删除一个项目 我已经传入了用户点击的项目的IDaction data进入减速机 我想知道如何匹配action data使用 Redux 状态中的 ID 之一 然后
  • 在我的输入中显示多个信息

    我有一个输入 div class search field search field date search field calendar ui datepicker calendar columns small 3 div
  • 错误列表索引必须是整数,而不是列表。获取一个数组的值,使用它们作为索引来删除另一个数组中的值

    seen dups collections defaultdict list for i item in enumerate prules for j orig in enumerate seen if item orig dups j a
  • 如何从二维数组中仅打印单个列?

    我正在编写这个程序 我必须只打印二维数组的一列 而不是两者 for int i 0 i lt sjf length i for int j 0 j lt sjf i length j System out printf 5d 4s sjf
  • AngularJS 将 ui-select 包装在自定义指令中

    我正在尝试将 ui select 包装在自定义指令中 https github com angular ui ui select https github com angular ui ui select this adminv2 dire
  • 如何使用 ui-router 获取带有参数的先前状态

    问题陈述 我有一个 添加评论 按钮 只有当我登录系统时我才应该能够添加评论 但问题是我登录后无法返回 添加评论 页面 因为我不知道之前的状态或无法获取之前的状态 有没有更清洁的解决方案 我应该将登录页面设置为模态页面而不是新页面吗 我已经看
  • AngularJS 路由与后端路由

    我想在我的下一个项目中使用 AngularJS 该应用程序具有 Python 后端和 html5 Angular 前端 我将在后端使用 MVC 框架 但我有点困惑 我必须在后端和前端使用路由吗 因为我总是使用后端路由 而前端路由对我来说确实
  • 如果满足条件,Angular JS 如何添加 CSS 类

    我正在创建一个截断指令 如果字符超过 10 我就会截断文本字符串 然后它将显示 我的目标是编写一个条件 如果字符少于 10 个 则删除 如果有人对我如何实现此目标有任何想法 我会坚持这一点并接受建议 这是我的代码 var app angul
  • 为什么.net中的数组只实现IEnumerable而不实现IEnumerable

    我正在实现自己的 ArrayList 类 当我意识到这一点时 我感到很惊讶 public System Collections Generic IEnumerator
  • Angularjs:当滚动到达div中滚动条的底部时如何触发事件?

    我试图在滚动条到达末尾时触发一个事件 我找到了这个这个例子 http jsfiddle net ADukg 4831 这是我的代码 问题是它根本不调用 load more 控制台语句的值为 848 899 in scroll 881 899

随机推荐

  • 如何在 R 中将字符串转换为日期

    有什么方法可以将下面的字符串转换为标准 R 日期类对象吗 Date String 19th January 2020 任何指针表示赞赏 Lubridate 可以处理它 gt Date String lt 19th January 2020
  • 在 mysql 查询中列出 null 和 not null

    假设我有桌子 NAME ID REF foo1 1 NULL foo2 2 1234 foo2 3 567 foo1 4 NULL foo3 5 89 我想在一个查询中计算 NULL 和 NOT NULL 的所有实例 这样我就可以说 NAM
  • Python 如何从 .egg 文件导入模块?

    我怎样才能打开 init pyc here gt gt gt import stompservice
  • 如何使用 php Excel 生成漂亮的 PDF?

    我正在使用最新的 PHPExcel 版本 我认为是 7 7 我能够生成我的Excel 我必须使用 tcpdf 生成 pdf 版本 这里别无选择 但结果是丑陋且过大 请参阅 2012 000012 的巨大字体大小 在 Excel 中为 11
  • PHP next() 不工作

    我正在尝试使用 PHP 制作一个画廊 图像加载正确 但下一个和上一个按钮似乎不起作用 单击图片 1 下的 下一步 您将看到图片 3 但是单击 图片 3 将您带到图片 2 这是正确的 我应该如何更改我的代码以使两者都按顺序进行
  • 在 Play 2.4 with DI 中,如何在“Secured”特征中使用服务类?

    这是一个Play 文档中的授权示例 https www playframework com documentation 2 0 4 ScalaSecurity Authorization 版本 2 0 4 我试图找到此文档的更新版本 但找不
  • 在 IntelliJ 中使用 Scala 工作表很困难

    我正在学习 Scala 函数式编程原理课程 但我在 IntelliJ 中使用 Scala Worksheets 进行快速测试时遇到了很多问题 例如 我建立了一个新的 Scala 项目 在其中创建了一个名为的包对象lecture5 它在文件中
  • 在 R 中下载 Kaggle zip 文件

    我正在尝试直接从 R 代码本身的 Kaggle 空间下载 zip 文件 不幸的是 它的效果并不好 这是发生的事情 对于旧金山犯罪数据集 请访问https www kaggle com c sf crime data https www ka
  • Xcode pbxstrings 文件的用途是什么?

    我有一个 Xcode 项目 需要更改它构建的产品的名称 我仔细地浏览了项目文件 并认为我已经做出了所有可能的更改 最后一步是 grep 项目文件夹中的所有文件以查找旧名称的出现 结果很干净 但是在构建之后 grep 发现一个文件包含多次出现
  • 需要帮助为 SpreadsheetApp 创建 GMAIL Pub/Sub 通知服务(Google Apps 脚本)

    我希望我不必重新发布这个问题 但我的老板将这个问题推到了高优先级 我需要帮助来解决这个问题 我正在尝试使用 GAS 脚本从我的 GSuite 域上的地址提取发布 订阅通知 目前 我正在我的域上进行测试 基本上 我正在尝试完成所有这些材料中描
  • Windows 10、DPI 缩放和全屏

    我有一个应用程序 Windows 8 1 中的 PROCESS PER MONITOR DPI AWARE 和 Windows 10 v1703 中的 DPI AWARENESS CONTEXT PER MONITOR AWARE V2 我
  • 如何查找接口中方法的索引?

    如何找到接口中定义的过程 函数的索引 可以用RTTI来实现吗 首先我们需要枚举接口的方法 不幸的是这个程序 APPTYPE CONSOLE uses System SysUtils System Rtti type IMyIntf inte
  • Zend 框架窗体装饰器

    我正在尝试使用装饰器获得以下布局
  • 检查组合框值是否为空

    我创建了一个包含三个值的组合框 我希望在未选择任何项目时打开一个消息框 所以我尝试了以下操作 if comboBox1 SelectedItem null MessageBox Show Please select a value retu
  • asp网站项目中多目标框架的问题

    我开发了一个针对 NetStandard 和 NetFramework 的 C 库框架 这是通过编辑 csproj 文件 将 TargetFramework 更改为 TargetFramework 来完成的s并将它们都添加到标签中
  • 如何使 CSS3 悬停过渡仅运行一次而不是在用户“取消悬停”后“倒回”?

    我有一些 CSS 见下文 我想当用户将鼠标悬停在外部字段上时 使内部 div kitty 在屏幕上平移 这工作正常 但是 正如您所期望的 当用户将鼠标从外部字段移开时 动画会 倒带 然后 当然 如果用户再次悬停 动画就会重播 我试图弄清楚如
  • 错误的 UTF-8 无 BOM 编码

    我使用 Notepad 将所有文件转换为没有 BOM 编码的 UTF 8 我对 BOM 不再有任何问题 但是没有 BOM 编码的 UTF 根本不起作用 就好像我的网站是用 ANSI 编码的一样 所有特殊字符都显示为 或 造成这种情况的原因是
  • JSF 2.0 Facelets 嵌套模板继承

    是否可以定义从 Facelet 中的其他模板继承的模板 像这样的东西 GlobalTemplate xhtml users UsersTemplate xhtml template GlobalTemplate xhtml users vi
  • 超时超过 3 小时 Automation Runbook Azure

    大家好 我有一个运行手册要启动 但运行 分区过程 需要 3 个多小时 因此 它在完成之前停止了 我想知道是否有办法超过3小时的限制 我听说过混合运行手册 但我不确定它如何解决我的问题 您知道是否还有其他解决方案 多谢 如果您想坚持使用 Az
  • 是否可以通过包含在另一个数组中来过滤 angular.js?

    所以如果我有一个数组 scope letters id a id b id c 还有另一个数组 scope filterBy b c d 我想要一些 ng repeat 来仅通过 filterBy 中出现的项目来过滤 scope lette