ng-options中相关选择的筛选器
ng-options是AngularJS框架中的一个指令，用于在HTML中创建下拉选择框。它可以与ng-model指令结合使用，实现数据的双向绑定。
筛选器是ng-options中的一个可选参数，用于对选择项进行筛选和排序。筛选器可以是一个函数或一个表达式，用于过滤和排序选择项。
在ng-options中使用筛选器可以实现以下功能：
- 筛选选择项：可以根据特定条件过滤掉不需要的选择项，只显示符合条件的项。
- 排序选择项：可以根据特定规则对选择项进行排序，使其按照特定顺序显示。
以下是一个示例代码，演示了如何在ng-options中使用筛选器：
<select ng-model="selectedOption" ng-options="option.name for option in options | filter:filterFunction | orderBy:orderByFunction"></select>在上述代码中，options是一个包含选择项的数组，filterFunction是一个自定义的筛选函数，orderByFunction是一个自定义的排序函数。通过使用filter和orderBy筛选器，可以根据条件过滤和排序选择项。
推荐的腾讯云相关产品是腾讯云云服务器（CVM），它提供了可靠的云计算基础设施，适用于各种应用场景。您可以通过以下链接了解更多关于腾讯云云服务器的信息： 腾讯云云服务器
请注意，本回答仅提供了一个示例，实际使用时需要根据具体需求和情况进行调整和配置。
相关·内容
我使用AngularJS来列出和过滤一个任务板。我还使用unique删除ng-options中的重复字符串。当我加载页面时，result很好地列出了所有的json，但是当我尝试使用<select>过滤内容时，它只返回一个结果。
例如:在json中，我有两个具有Feb的数组。如果我选择Feb on <select>，它只返回1，而不是2。我做错了什么？
html：
<body ng-controller="ListTask">
<div>
<select bg-model="categoryFi
浏览 1提问于2014-10-28得票数 1
回答已采纳
1回答
我有下面的代码，用于向下钻树结构，从模型到下拉视图。我不明白以下的说法：
ng-options="classification for (classification, configs) in filterData"
有几个疑问。
为什么ng模型的分类下拉点要降到configs。
如何在我的控制中获得选定的分类器(system_config或network_config)？
在从下拉列表中选择分类时，信任信息会自动被过滤。如何在我的控制器中获得选定的配置。
Plnkr链接-
视图的代码如下：
<div class="m-b">
浏览 4提问于2016-01-07得票数 0
我正面临一个性能问题。我在ng-options中使用了自定义过滤器，它在ng-repeat下。
下面是示例代码：
<div ng-repeat="item in items">
<select ng-model="User[item.id]" ng-options="translatedKey.option as translatedKey.value|optionTranslater for translatedKey in item.translatedKeys">
</div>
在我的控制器中，定义了包含
浏览 2提问于2016-09-30得票数 1
我有一个下拉过滤器，它工作得很好。请参阅链接
但是我想在下拉列表中再添加一个值，那么它就不能正常工作了。我已经尝试了下面的代码。
<select ng-model="filterDeck.deckDetail" ng-options="deck.name as (deck.name+' - '+deck.level) for deck in data">
</select>
请帮我做这件事。谢谢。
Vimal
浏览 0提问于2015-02-27得票数 7
回答已采纳
我的uib-typeahead中有一个uib-typeahead，ng-options部分如下所示
<input
ng-model="mergeParticipant"
getDisplayValue(value.name, value.age, value.membershipId) for value in participants | filter:$viewValue"
/>
正在调用以格式化显示的函数如下：
$scope.getDisplayValue = (n
浏览 4提问于2016-06-30得票数 0
回答已采纳
1回答
我试图制作一个小型搜索引擎，使用角和json对象。我用链式的3个下拉列表对查询进行排序，以便根据所选内容填充它们。结构是这样的:一个json对象包含一个类别数组，每个类别包含一个产品数组，每个产品数组都包含价格、名称等参数，因此当用户选择一个类别时，第二个下拉列表将使用相关产品填充。当用户选择相关产品时，第三个下拉列表将填充此产品的价格。
这是json：
[{
"caregory": "Electronics",
"products": [{
"product": "PC",
浏览 3提问于2015-11-25得票数 1
回答已采纳
我有一个用于select标记的HTML，代码如下：
<div ng-controller="Models">
<select ng-model="myModel" ng-options="Model.name for Model in Models" class="form-control"></select>
{{ {selected_Model:myModel.name} }} {{ {selected_Model:myModel.id} }}
</div>
我
浏览 1提问于2015-05-14得票数 0
2回答
我正在尝试对一个在ng-options中使用的对象进行一个奇特的过滤。
我的ng-options调用：
<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes"></select>
下面是传入的对象。
$scope.ssidTypes = {
"CPE": {
display: "Fixed/CPE",
feature
浏览 2提问于2017-07-29得票数 0
3回答
用于选择框的角不变数组
、、、
我的要求是拥有多个具有相同下拉(ng-选项)数组的选择框，但是如果我在一个选择框中选择了一个值，则应该从另一个复选框中删除它。
在on事件中，我尝试使用一个新数组，不包括首先为该数组选择的项。但是它会从两个选择框中被删除。就像不可变的DS一样，DS总是返回原始的变异克隆。
需要建议是否有可能达到这一目的，还是有一个解决办法。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$sco
浏览 0提问于2017-02-24得票数 2
回答已采纳
假设您有如下内容：
ng-options="item.Name for item in filters"
与ng-options相关的代码被认为是JavaScript吗？或者，有没有一个术语Angular用来调用嵌入在HTML指令中的代码？
浏览 2提问于2014-03-10得票数 3
我有一系列的价格(0，0.99，1.99...等)，我想要在<select>中显示。
我想这样使用Angular的ng-options
<select ng-model="create_price" ng-options="obj for obj in prices"/>
如上面所示，它将生成0、0.99、1.99...
但是我想在代码中使用一个过滤器，这样每次出现单词'prices‘(或类似的东西)时，代码就会运行一个函数，将浮点数更改为字符串并显示(free，0.99$，1.99$...等)。
我有办法做到这一点吗？
谢谢
浏览 44提问于2013-05-20得票数 49
回答已采纳
在从角度1.4.11迁移到1.5.8之后，我遇到了以下错误：
Error: [orderBy:notarray] Expected array but received: 3455
我在这个表达式中找到了它：
ng-options="profile.name for profile in vm.allProfiles track by profile.id | orderBy: 'name'"
但当改变为
ng-options="profile.name for profile in vm.allProfiles | orderBy: 'name
浏览 4提问于2016-10-10得票数 2
回答已采纳
我有一个可以正确迭代的对象：
<select ng-options="value.name for (key,value) in ctrl.userList"></select>
我想在对象上添加一个筛选器，例如：
|filter:value.superior!=null
它只会显示用户，而不显示当前分配的上级。
现在看来，它没有显示，但应该显示1。在应用过滤器时，我是否缺少了什么？
我一直在用的例子是：
<select ng-options="value.name for (key,value) in ctrl.userList | fi
浏览 3提问于2016-10-09得票数 0
回答已采纳
我在这里找到了这样的答案：
它在柱塞上工作得很好，但是当我在我的项目中实现它时，它就不起作用了。
我的HTML：
<div ng-controller="PolicyController as policy">
<select multiple ng-model="proto" ng-init="proto=policy.protocols[0]"
ng-options="protocol for protocol in policy.protocols"></select>
浏览 2提问于2015-12-28得票数 0
回答已采纳
我正在尝试使用track by对ngOptions进行排序
这是我的模板
<select ng-model="asd" ng-options="user.id as user.name for user in users track by user.id | orderBy: 'name'">
这是我的控制器
function AppCtrl($scope) {
$scope.users = [
{id : 25, name: 'Batista'},
{id : 26, name: 'Ult
浏览 0提问于2014-05-29得票数 74
回答已采纳
我有两个用于country和state的json数组。现在我必须根据国家选择来过滤州降。
The two JSON arrays are like this.
$scope.countries = [{id:1,json:{'key':'1',value:'INDIA'}},{id:2,json:{'key':'2',value:'USA'}}];
$scope.states = [{id:1,json{'key':'1',value:'
浏览 3提问于2017-01-08得票数 0
回答已采纳
我正在尝试添加到我当前计算的字段中。
这是一个相当简单的左(上(STR)，2)，我目前正在使用。这将填充筛选器列表。但是，我想要么修改公式，要么修改列表本身，使其仅包括基础数据所在的STR项，对于没有数据的任何数据，它们将被从列表中删除，直到它们有要选择的数据为止。
把STR看作是状态缩写。如果COUNT( Things ) =0，那么我不希望筛选列表中的状态，但是如果有，或者如果后来在状态中添加了一些东西，我希望它显示出来。
我尝试使用IF COUNT(Things) >0然后左(上(STR)，2)结束，但这似乎不起作用。如果可以的话，我也可以使用一个条件来显示过滤器，但是我不知道如何
浏览 5提问于2016-12-19得票数 0
回答已采纳
我有一个json的副标题：
[{
"id": "200",
"topicID": "20",
"name": "Support for project hosted by ncegitref1"
},
{
"id": "201",
"topicID": "20",
"name": "Support for project hosted by rndwww (Sta
浏览 0提问于2016-07-05得票数 1
回答已采纳
1回答
我有一个<select>元素，我使用ng-options添加插入可用值，我的代码如下
<select ng-model="selectedCollection"
ng-options="collection.collectionName for collection in seriesCollection">
</select>
这很好，在$scope.selectedCollection中，我拥有整个collection对象。
现在，我需要根据一些参数添加一些额外的<option>元素。我认为最好的方法是
浏览 1提问于2016-02-12得票数 0
回答已采纳
2回答
如果我有一个像这样的select元素：
<select
ng-model="dispatchOutput"
ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params"
class="form-control"
id="dispatchOutput" >
使用对象列表中的元素填充select，这些元素可能有多个具有相同值的Strin，如何避
浏览 2提问于2017-07-18得票数 1
回答已采纳
我希望通过与对象中某个特定条件匹配的对象来筛选ng-options中的对象列表。
例如，我有这样的数据：
{
id:1,
type:"Type A",
name:"loc 1",
items:[
{id:1, name:"item 1"},
{id:2, name:"item 2"},
{id:3, name:"item 3"},
]
},
我的选择看起来像
浏览 2提问于2015-02-06得票数 0
回答已采纳
我正在尝试格式化从dateTime web服务返回的C#，格式为‘2016-01-01T00:00:00:00’，以角格式格式化为标准MM/dd/yyyy格式。所讨论的日期在选择列表中。
下面是AngularJS：
angular.module('myApp', [])
.controller('ctrl', function ($scope) {
$scope.options = [{
name: "Date One",
date: "2015-01-01T00:00:00"
浏览 3提问于2016-07-27得票数 1
回答已采纳
如果使用筛选器后<select>变量为空，是否可以隐藏ng-options元素？
<select class="form-control"
ng-model="selected"
ng-options="property.pstSnr.description for property in leistobToProperties | filter: {grouping:1}">
</select>
如果<select>的所有选项都为空，则property.pstS
浏览 4提问于2015-01-29得票数 1
回答已采纳
2回答
如下图所示
我想要实现的是，当我在dropbox中选择一个特定区域时，块dropbox只显示只属于所选区域的内容。如何在画面中认识到这一点？区域和块都是参数。
浏览 7提问于2015-04-09得票数 2
回答已采纳
我对一个集合进行了选择性迭代，如下所示：
ctrl.countriesList = {
'DK': {countryName: 'Denmark', preferredLanguage: 'DA'}
'US': {countryName: 'USA', preferredLanguage: 'EN'}
}
并对对象进行迭代：
ng-options="country as country.countryName for country in $ctrl.countriesLis
浏览 8提问于2017-01-30得票数 0
回答已采纳
1回答
我有一个选择下拉列表，根据元层呈现可用选项，元层反映了做出选择后返回到服务中的数据。
其中一个潜在状态是未知的，它是返回结果中数据库中未分配状态的任何数据的总称-因此它是一个有效状态，这就是它出现在元数据中的原因。
但是，如果没有选择状态或选择了所有状态，那么它可能会出现在返回结果中，但我们不希望在此表单的选择选项中显示未知状态。
当我呈现我的选择时，有没有办法跳过那个选项/值？UNKNOWN的值为0，下面是我当前如何呈现我的SELECT...
<select name="invoicestatus" id="invoicestatus" class=&#
浏览 0提问于2016-04-07得票数 0
我有两(三)个列出相同选项(brans)的select标签。我想阻止用户在这些选择中选择相同的值。
控制器：
$scope.brands = [
{id: '1', name: 'Peugeot'},
{id: '2', name:'BMW'},
{id: '3', name:'Mercedes'}
];
在模板中，我尝试以两种方式使用filter过滤器：
<body ng-controller="FilterCtrl">
<div>
<
浏览 10提问于2016-08-26得票数 1
回答已采纳
1回答
当我做下拉选择时，我的ng模型对象变为空，不确定原因。
因为它返回null，所以在错误下面得到的是：
TypeError: Cannot read properties of null (reading 'name')
我的代码
<select ng-options="option.name for option in $ctrl.getAvailableColumnOptions()" ng-model="$ctrl.secondColumnOption"></select>
<select ng-options
浏览 1提问于2021-10-15得票数 0
回答已采纳
2回答
我试图通过下拉列表设置的属性筛选列表：
<select ng-model="filterItem" ng-options="item.name for item in filterOptions.stores">
</select>
这是下拉列表的数据：
$scope.filterOptions = {
stores: [
{id : 2, name : 'Show All', rating: 6 },
{id : 3, name : 'Rating 5', ra
浏览 4提问于2015-08-10得票数 0
回答已采纳
2回答
我正在尝试使用ng选项从数组中显示数据，并希望筛选出不起作用的数据。我不想显示对象有billHeadShortForm=FEC和FDG
这是我的HTML
<select class="form-control" ng-init="getBillHeadCurrentProjWise()" ng-model="headID" ng-options="h.billHeadID as h.billHead for h in billHeadsProjWise | filter:h.billHeadShortForm!='FEC&#
浏览 0提问于2015-10-09得票数 0
回答已采纳
下面有代码，我试图从另一个选择框中驱动一个复选框，但是子类别选择一次只显示一个项，它应该显示每个具有父类别的项。例如，如果卡车在类别中被选择，子类别应该显示望远镜和有害物质，如果我选择Van，那么子类别将只有迷你。我到底做错什么了？
<select name="Category" ng-model="selectedCategory"
ng-options="item.id as item.name for item in categories | unique:'name' | orderB
浏览 2提问于2014-06-05得票数 0
回答已采纳
1回答
我有两个选择元素。第一个是用来选择一个国家。第二个用于选择一个状态。
每个州都离不开一个国家。
各国：
[{"code":"SC","name":"Santa Catarina","country":{"code":"BRA","name":"Brazil"}}, {"code":"RR","name":"Roraima","country":{"code&#
浏览 0提问于2014-11-12得票数 4
回答已采纳
所以我想我要做的事情很简单。不过，我对ng-options还是很新的。我一直在使用ng-重复，在黑暗中关于ng-options，但我相当肯定，ng-options会更好地完成我的任务。
我要做的是根据第一个ng-options中的内容选择，确定用户在第二个ng-options中看到了什么。
这里是我的HTML，我尽我最大的努力去做我想要做的事情：
<div class="formRow">
<select name="Client" ng-model="selectedClient" ng-options="x.
浏览 4提问于2016-08-26得票数 0
回答已采纳
3回答
如何使用ng-repeat在角js中获取所选选项的对象？示例，其中我自己填充下拉列表，
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{
浏览 6提问于2016-06-03得票数 0
1回答
我有一个对象，它将ID映射到它们的对象。我想要显示这些对象的列表并使用过滤器，但我无法让它工作。具体地说，我试图阻止ID为2的对象出现在选项中这是我得到的：
<div ng-app ng-controller="ctrl">
Unfiltered:
<select ng-model="selectedBidType"
ng-options="bidType.id as bidType.label for (bidTypeID, bidType) in bidTypes">
<
浏览 0提问于2014-05-17得票数 2
我有五次跌落。所有五个下拉列表都有相同的选项来源。在一个下拉列表中选择的选项不应出现在其余下拉选项中。什么是最好的方法来实现它在天使？
ng-options的源是对象数组。
浏览 1提问于2015-03-07得票数 1
回答已采纳
我有一个用ng-options填充的选择框。我知道您可以手动添加默认选项，如下所示：
<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown" id="address
浏览 1提问于2014-03-21得票数 9
回答已采纳
2回答
将内容从发布导出到其他环境中具有不同名称的发布时，目标发布的属性也会变得相同，并且我们无法更改目标发布的父级。需要帮助..。
浏览 0提问于2012-05-07得票数 4
回答已采纳
1回答
我正在尝试创建一个excel工作簿，其中对主电子表格的更新将自动反映到同一工作簿中的工作表上，该工作簿派生自主电子表格的过滤数据。
我尝试通过创建从主电子表格到派生工作表的行之间的链接来解决此问题。但是，因为它们是表格，所以它们会不断地被过滤掉，我发现这会破坏链接。由于链接是行相关的，我想不出一种方法能够在不中断的情况下链接所有这些链接。尽管有许多变量在起作用，但有没有办法绕过这个问题？
浏览 15提问于2017-08-24得票数 0
我有一个ng-options选择列表，我希望有一个显示所有选项的默认选项；当你单击列表中的一项时，它应该过滤，当你单击默认值时，它应该显示所有值。我可以在过去发誓我可以使用一个值设置为"“的选项html元素来做这件事，但这不起作用，有人能帮我解决这个问题吗？在下面拉小提琴。
<select ng-model="todoFilter" ng-options="todo.name as todo.name for todo in todos" class='form-control'>
<option value=&
浏览 1提问于2016-01-15得票数 0
我正在尝试清除select中特定选项的过滤器。
我可以使用其他选项从JSON中所需的字段name中检索值。但是当我选择No Filter时，我希望它清除所有过滤器并显示整个JSON值。
以下是我的代码：
filter by anything:
<select ng-model="select2.name" ng-options="item.name as item.name for item in items
浏览 0提问于2016-11-11得票数 0
大家好，我正在使用AngularJS创建一个应用程序网站。
我想在我的选择中显示城市02作为默认选择，并删除两个单词下划线之间的暗号，如city_02，希望显示城市、城市02、城市03，而不是我选择的城市、city_02、city_03。
<select ng-model="selectedCity" ng-options="x for (x, y) in cities">
</select>
这是我的剧本js：
$scope.cities = {
city : [
{id:'c01' , name:&#
浏览 4提问于2016-03-26得票数 1
回答已采纳
1回答
我有4个不同的选择元素，我想过滤我的ng重复与他们。如果我选择不同的select元素的一个选项，结果很好，但是当我选择2个选项时，它就失败了。
下面是示例
HTML：
<div ng-app="app" ng-controller="goalList" >
<div class="hidden filter">
<select multiple="multiple" data-placeholder="Team" ng-multiple="tr
浏览 2提问于2014-07-24得票数 3
回答已采纳
我希望second dropdown不包含first选择。如果我在第一个下拉列表中选择"Team1"，那么第二个下拉列表中不应该包含"Team1" and to contain the other ones.，反之亦然。
<div ng-app>
<div ng-controller="TodoCtrl">
<select ng-model="name" ng-options="f.name for f in devices"></select>
浏览 0提问于2017-07-26得票数 0
1回答
在我的angularjs应用程序中，我使用的是多选择下拉，如下所示：
<oi-multiselect ng-options="item.name for item in ins_Types " ng-model="insuranceTypes" multiple placeholder="Select" data-ng-required="true" name="insType" ></oi-multiselect >
和
$scope.ins_Types = [{id: 1, nam
浏览 2提问于2016-05-03得票数 0
回答已采纳
我有一个二维的数据集
原始维数
我想要创建两个过滤器，可以用来过滤我的仪表板。这两个过滤器将被称为- "Product_Type“和"Product”，并且应该有以下下拉列表：
滤波器击穿
总之，我正在寻找一种方法来获取我最初的维度并创建过滤器分解，以便在我的仪表板中我可以有两个过滤器(Product_type和Product)。当我点击Product_type过滤器时，我应该能够看到“整体”、“水果”、“蔬菜”和“绿叶”。根据我的选择，产品过滤器应该只自动显示相关的值--也就是说，如果我选择了“叶子”，它应该只显示“菠菜”和“甘蓝”。最后，如果我选择“甘蓝
浏览 5提问于2017-08-25得票数 0
回答已采纳
现在是2075年，不朽的人类奴役了凡人。有一家商店出售凡人朋友，并试图开发这个应用程序，这样客户就可以通过使用自己喜爱的品牌过滤他们的朋友来管理他们的朋友。但显然angular.js坏了。
<select ng-model="searchText2.id" ng-options="friend.brand.id as friend.name for friend in friends">
<option value="">Select</option>
</select>
<tr n
浏览 2提问于2015-09-03得票数 0
回答已采纳
如何使用角js中的ng选项删除Drop Down中的空值和空白值？
一些数据在college name中，有些数据没有college name，所以在下拉列表中发生了什么，空值正在显示。
我只期望值，而不是空项，所以如何删除空项。
。
以及如何将Mingle、College Name和School Name合并成一个Drop Down。
我的下降：-
<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.col
浏览 2提问于2017-08-31得票数 1
回答已采纳
2回答
我在$scope.currentSChannels.scgsLink中有一个对象数组，这个对象数组有如下所示
$scope.currentSChannels.scgsLink = {channelId:1，sCgsLinkId:1，groupNo:1，百分比: 50，expireHrs:4}，{channelId:1，sCgsLinkId:2，groupNo:2，百分比:50，expireHrs:1}
我还有下面的选择列表
<div class="col-md-4">
<select class="form-cont
浏览 0提问于2015-10-26得票数 1
回答已采纳
1回答
我是jQuery/Javascript的新手，一直在尝试在页面加载时关闭选项卡式导航菜单，然后在用户单击时打开。到目前为止，我还没有编辑下面的文件
function amshopby_start(){
$$('.block-layered-nav .form-button').each(function (e){
e.observe('click', amshopby_price_click_callback);
});
$$('.block-layered-nav .input-text').each(
浏览 0提问于2014-01-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
