AngularJS ng-options 按数组值过滤答案

【问题标题】：AngularJS ng-options filter by array valueAngularJS ng-options 按数组值过滤
【发布时间】：2019-03-06 04:28:56
【问题描述】：

我需要一些帮助来弄清楚如何使用 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>

我尝试仅在 <select> 标记上显示带有 data-ng-if="item.roles.indexOf('Tech') > -1" 的选项，但从未满足该条件，因此根本不显示下拉菜单（这是有道理的）。

我还尝试将data-ng-options="item.id as item.name for item in users | filter:{item.roles:'Tech'}" 与过滤器一起使用，但由于 AngularJS 解析错误而失败。

不确定如何按数组值进行过滤。

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

您上次尝试的逻辑是正确的，但您有一个小的语法错误。试试下面的

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

$scope.customFilter = function(row){
    if(row.roles.includes("Tech")){
        return true;
    }
    else{
        return false;
    }
}

Demo

【讨论】：