angularjs - AngularJS ng-options 按数组值过滤
问题描述
我需要一些帮助来弄清楚如何使用 AngularJS 过滤器来仅显示符合我的条件的选项。
我有下面的数组。
var users = [
{'id':0, 'name':'John', 'roles':['Admin']},
{'id':1, 'name':'Alice', 'roles':['Admin', 'Tech']},
{'id':2, 'name':'Sam': 'roles':['Tech']}
]
<select>
我使用以下代码呈现列表中的所有用户。但我只想向用户展示角色是“技术”的用户。我在这里查看了其他一些答案,但它们都将过滤器与对象一起使用,我正在尝试使用数组。
<select data-ng-options="item.id as item.name for item in users"></select>
我试图仅data-ng-if="item.roles.indexOf('Tech') > -1"
在<select>
标签上显示选项,但从未满足该条件,因此根本不显示下拉列表(这是有道理的)。
我也尝试使用data-ng-options="item.id as item.name for item in users | filter:{item.roles:'Tech'}"
过滤器,但是由于 AngularJS 解析错误而失败。
不知道如何按数组值过滤。
解决方案
您上次尝试的逻辑是正确的,但您有一个小的语法错误。尝试以下
<select ng-model="selectedValue" data-ng-options="item.id as item.name for item in users | filter: { roles: ('Tech') }"></select>
您还可以为此创建自己的自定义过滤器功能
html
<select ng-model="selectedValue" data-ng-options="item.id as item.name for item in users | filter:customFilter"></select>
js
$scope.customFilter = function(row){
if(row.roles.includes("Tech")){
return true;
}
else{
return false;
}
}
推荐阅读
- r - 如何使用向量将数值替换为链接?
- google-apps-script - 从不同的容器调用绑定脚本
- docker - Docker 容器端口未公开
- android - 如何避免 Kotlin 中的指数/科学记数法?
- javascript - How to implement drag and drop behaviour in React
- mysql - 获取字符串日期列的当前月份数据
- swift - Swift CameraView 放大和缩小不起作用
- react-native - React Native 移动应用程序也适用于 Web 和桌面
- java - 搜索在 vaadin UI 之间传递数据的最佳实践
- database - How to check the version of DolphinDB I am using?