Angular ng-选项使特定选项列在列表的第一位
Angular中的ng-options指令用于在下拉列表中显示选项。它允许我们从一个数组或对象中动态生成选项，并将选定的值绑定到模型中。
ng-options指令有几种用法，下面是其中一种常见的用法：
<select ng-model="selectedOption" ng-options="option for option in options"></select>在这个例子中，我们有一个名为options的数组，它包含了要显示的选项。ng-options指令将遍历这个数组，并将每个选项显示在下拉列表中。当用户选择一个选项时，ng-model指令将把选项的值绑定到selectedOption变量中。
除了简单的数组，ng-options还可以处理对象数组和对象字面量。下面是一些示例：
- 数组对象：
<select ng-model="selectedOption" ng-options="option.id as option.name for option in options"></select>在这个例子中，options数组包含了一组对象，每个对象都有一个id和一个name属性。ng-options指令使用option.id as option.name来指定选项的值和显示文本。
- 对象字面量：
<select ng-model="selectedOption" ng-options="key as value for (key, value) in options"></select>在这个例子中，options是一个对象字面量，它的键值对将被用作选项的值和显示文本。ng-options指令使用(key, value)来指定键和值的变量名。
ng-options指令的优势在于它的灵活性和强大的功能。它可以根据不同的需求生成不同的选项列表，并且可以与其他Angular指令和过滤器一起使用，以实现更复杂的功能。
在实际应用中，ng-options可以用于各种场景，例如：
- 动态生成下拉选项，例如从数据库中获取数据。
- 根据用户的选择动态更新其他部分的内容。
- 过滤和排序选项列表。
- 与表单验证和表单提交一起使用。
对于腾讯云的相关产品和产品介绍链接地址，可以参考腾讯云官方文档或者咨询腾讯云的客服人员获取更详细的信息。
相关·内容
1回答
我正在尝试在我的Angular2应用程序中创建一个主/详细类型视图。在我的主要应用程序组件中，我定义了以下路由：
@Routes([
{ path: '/', component: HomeComponent },
{ path: '/brands/:brandId/...', component: BrandShowComponent },
{ path: '/brands', component: BrandListComponent }
])
我可以很好地导航到/brands，在那里我显示了一个品牌列表。当选择一个
浏览 0提问于2016-06-03得票数 0
1回答
我的角度有问题，这是我第一次使用它后，在CodeAcademy的课程。我的代码如下：
HTML：
<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
<section id="intro" class="main style1 dark">
<!-- Header -->
<header ng-controller="MainController"
浏览 2提问于2015-05-27得票数 1
回答已采纳
此代码通过ng-重复指令在列表中显示文本框的内容.但我注意到它没有显示复写字母。只有当字母都不同的时候才会显示出来。例如，如果我在文本框中输入abcabc，我在列表中只看到abc一次，而不是abc，我如何也可以显示重复的字母？谢谢。
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app>
<input type="text" ng-model="n
浏览 6提问于2020-10-22得票数 1
回答已采纳
我正在尝试使用相同的JSON对象实现级联下拉选项，以填充两个下拉列表。
码
var app = angular.module('App', []);
app.controller('MainCtrl', function($scope) {
$scope.fruit1 = {};
$scope.fruit2 = {};
$scope.fruits = [{
"id": "1",
"value": "Apple"
},
{
"
浏览 4提问于2016-06-09得票数 1
回答已采纳
我有一个Drupal 7视图，文章按日期排序。
我希望通过发布选项使任何文章都成为列表的首位，然后按日期排序。
如何配置Drupal 7视图以启用此功能？
浏览 0提问于2018-05-04得票数 0
回答已采纳
正如在kendo UI文档中所描述的那样，使用此结构可以影响可能的筛选器操作符：
filterable: {
operators: {
string: {
isempty: "Is empty",
isnotempty: "Is not empty",
startswith: "Starts with",
contains: "Contains",
}
},
},
在列定义中包含了这些行
浏览 1提问于2017-03-28得票数 0
回答已采纳
2回答
我在ng-重复中有一个下拉列表和一个add按钮，它可以向列表中添加新的下拉列表，就像我在JSFiddle中显示的那样，并且我希望限制第二个下拉列表，以选择第二个下拉列表中的第一个选定的值。因此，在第一个下拉列表中选择的值不应该允许在第二个下拉列表中选择或隐藏该值。
在我以前的问题中，parkar给出了答案，但我无法将这个答案集成到我的JSFiddle中。
ng-repeat="post in posts | filter: { type: selectedValue }"
请帮帮我。
var app = angular.module('angularjs-sta
浏览 1提问于2018-01-31得票数 2
回答已采纳
1回答
我使用的是angular ng-grid。网格中的最后一列是一个按钮。倒数第二列是一个下拉列表。当用户更改下拉值时，我需要启用相应的按钮。
我试着追随
ng-网格按钮列
cellTemplate: '<button ng-disabled="!disabled{{ scheduleList[ row.rowIndex ].job_id}}" >Save</button>'
更改dropdown时调用更新函数
$scope.update = function() {
$scope.disabled1 = true;
};
仅出于测
浏览 0提问于2013-12-12得票数 0
1回答
我正在使用datatables在angular中创建一个表。我使用了作用域中的值，并将该值与接收到的数据进行了比较。
"columns": [{ data: null, render: function ( data, type, row ) {
var roleid =angular.element('#TextkeysController').scope().currentRole;
return '<p ng-show="'+data.id+' == '+roleid+'" class="
浏览 6提问于2016-07-29得票数 1
身材魁梧的新手。过滤通过数据服务返回的json数据，并通过下拉列表完成筛选。我想做的是把这些事情结合起来：
我想删除最初的空白值返回通过角；
我还想让它预选一个默认情况下不包括在我的数据对象中的值(在我的例子中，返回所有对象，通过html作为select option添加)；
我希望在呈现页面时显示该初始默认值。
我可以删除最初的空白，但无法将包含的选项合并起来。
我已经研究过使用ng-repeat和ng-options来完成这个任务，并且可以通过ng-options将默认值设置为json中的一个对象，但这似乎不允许我添加一个数据中不存在的选项。由于我没有一个返回所有值的组
浏览 4提问于2016-03-16得票数 0
回答已采纳
我有一个select下拉列表，我正在通过Jquery追加到它上面动态添加选项，我想关联下拉列表中的所有数据，我是指所有选择到angular JS模型中的选项。
我正在选择作为
<select multiple='multiple' ng-model="attrId" name='attribute' id='hiddenRemoteChoicePossibleAnswers' ></select>
在几次服务器调用之后，我通过其他一些Jquery动态地添加了这个select选项：
$('#hid
浏览 0提问于2013-05-20得票数 0
回答已采纳
我正尝试在CQ5中创建一个footer组件，其中有4列&所有列都是可验证的。但我们也必须使列的编号可选，即，基于从下拉列表中选择的值，我们必须打开许多选项卡，以便仅创作这些许多列。
我已经创建了一个下拉列表，最大范围为6列。我知道我必须为此配置一个监听器，但不知道如何配置。要求是这样的:如果我从下拉列表中选择3，则3个选项卡应显示为author 3列
请帮帮我，我正在处理一件很重要的事情，我也需要解决方案，因为我必须尽快完成这项工作
浏览 4提问于2013-08-17得票数 0
2回答
使用有角度的用户界面。标记包括一个ng-scroll元素，我已经处理了从服务中检索到的数据。我希望在一个ng-repeat中创建一个项目行，这样就可以在ng-scroll中创建一个项目。这在原则上是可行的()，但是AngularJS说我在JSON编码中有问题，需要帮助我找出我做错了什么。
因此，清楚地说，下面的标记和JSON在柱塞中工作，但在应用程序中不起作用。柱塞和下面的JSON是从调试器响应体中提取的。
标记：
<div class="row" >
<div class="col-md-12" >
<div clas
浏览 2提问于2013-12-07得票数 2
回答已采纳
1回答
我想要指令来替换标记范围=-3，3到ng-选项。
不幸的是，下面的解决方案不是很好
<html lang="pl">
<head>
<title>Its directive range</title>
</head>
<body>
<div ng-app="app">
<div ng-controller="AppCtrl">
<select ng-model="valu
浏览 2提问于2016-09-18得票数 0
回答已采纳
我是新接触Angular的，目前我有一个<li></li>的ng-repeat
<ul>
<li value="" ng-click="setLimit(numPerPage)" ng-repeat="numPerPage in itemPerPage">{{numPerPage}}</li>
</ul>
和一个函数：
$scope.setLimit = function(val) {
$scope.numPerPage = val;
};
我如何重写这
浏览 3提问于2015-04-09得票数 1
我是一个AngularJS新手，在phonegap开发了一个应用程序，使用的是角+角移动用户界面。
我在引导列中的模板文件中有一个div列表，而不使用jQuery。我需要正方形的div应用一个高度响应他们的宽度在引导列。这应该是一个非常简单的脚本，但我无法处理。
这是我的模板：
template.html
<div ng-controller="ControllerIndex as Ctrl" item-list>
<div ng-repeat="item in items" >
<div class
浏览 4提问于2016-06-14得票数 2
回答已采纳
app.js：
var app = angular.module('myApp',
[]);
app.controller('ExampleController', ['$scope', 'myService', function($scope, myService) {
$scope.titles=myService.list;
$scope.controllerFunction = function() {
myService.list.push("bla");
};
}]);
app.
浏览 1提问于2015-08-06得票数 0
回答已采纳
我仍然在学习过程中的角度，所以我知道我可能是错误的做法，并希望知道正确的方式，如果是这样的。
我有一套级联下降-即第二个下拉选项显示取决于用户选择在第一个下拉。
一个简化的例子：
HTML
<select
ng-model="1stDropDown"
ng-change="on1stDropDownChange()"
ng-options="1stListItem.name for 1stListItem
浏览 2提问于2015-09-01得票数 0
回答已采纳
我使用的是嵌套的组件结构，在获得默认的“所有”选项以处理ng选项生成的选择列表时遇到了困难。我在这一页的底部添加了一个柱塞。如果我检查生成的列表的作用域，就会发现"All“返回的是null，而不是空字符串。下面添加了柱塞。
var app = angular.module('plunker', []);
app.component('keyfeed', {
bindings: {
search: '='
},
template: `
<ul>
<li ng-repeat=
浏览 3提问于2017-05-19得票数 1
回答已采纳
1回答
我可以在一个下拉列表中显示所有的数据，但是我想要创建另一个下拉列表。
我的JSON数据看起来如下：
[
{
field: "tenantId",
index: true,
isRequired: true,
instance: "String"
},
{
field: "channels",
index: null
},
{
field: "contractedProducts",
values: [
{
field: &#
浏览 1提问于2015-06-25得票数 4
我有一系列由ng-重复填充的列表项。可见性由一个简单的ng单击和ng显示关系控制.在大多数情况下，这是很好的工作，但我希望能够通过一个全局按钮来控制显示/隐藏行为，该按钮将显示或隐藏列表中的所有可用项。
公平地说:我还是AngularJS的新手。我知道这是一个范围界定的问题，但我不知道如何解决。几乎可以肯定的是，这是一个不知道该问的问题的情况。
我在这里做了一个小摆弄，证明了我的困难：
示例HTML：
<div ng-controller="MainCtrl">
<span ng-show="!IsVisible" ng-click=&#
浏览 3提问于2018-09-11得票数 2
回答已采纳
当模型eyeColorUnknown包含一个不存在于选项中的值时，角创建一个值为"?“的选项。如下图所示，目视描述为空白。
<select ng-model="eyeColorUnknown"
ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'"
class="ng-pristine ng-valid">
<option
浏览 1提问于2015-02-06得票数 2
2回答
因此，我需要.overlay div来显示列表中的项目何时被选中。ng-显示工作在'p‘或类似的，但它不与此当前显示？任何帮助都很感谢！
HTML代码：
<body ng-app="myapp">
<div ng-controller="MyController" class="app">
<ul>
<input type="text" ng-model="queryStyle" />
&
浏览 0提问于2016-07-14得票数 1
回答已采纳
我正在从Tuts+ Easier Apps with Angularjs教程中学习AngularJS。现在我在他们讨论使用ng-view的Routing Primer的部分。我试图在索引页面的ng-view中显示列表页面内容。由于某些原因，当我加载index.html时什么也没有显示。我在搜索中发现，从angular 1.2.0开始，ngRoute已经移到了自己的模块中。我必须单独加载它并声明依赖项。但我仍然不能显示我的列表页面中的任何内容。
index.html
<!doctype html>
<html ng-app="myApp">
<h
浏览 0提问于2014-06-22得票数 4
回答已采纳
1回答
我正在使用Angular和Full Calendar。有没有办法在屏幕宽度较小时只启用列表模式？
HTML (这是使用配置的地方)：
<div class="calendar-container">
<angular2-fullcalendar #calendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>
</div>
TS (这是设置要显示的数据以及在n
浏览 2提问于2018-12-09得票数 0
1回答
在我的Angular2项目中，我尝试使用ng引导。
按照他们的指示，我添加了引导css文件，在我的systemJS配置中映射了@ng-引导，安装了ng-引导，并将它们的主模块添加到我的根模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgbModule }
浏览 2提问于2016-11-24得票数 2
回答已采纳
2回答
所以我有一个这样的控制器：
var control = angular.module('controllers', []);
control.controller('aboutme', ['$scope',
function($scope) {
$scope.tabs = [{
"title": "interests",
"list": ["cats", "kittens"]
}, {
"title
浏览 1提问于2015-01-08得票数 1
回答已采纳
我正在使用angular's ng-swipe-left和ng-swipe-right来捕捉swipe事件(在联系中)。我试图使一个图像旋转，根据滑动速度和脏，而滑动正在进行。问题是，只有当滑动结束时，我才能捕捉到事件。
浏览 4提问于2015-10-14得票数 0
回答已采纳
1回答
我正在使用Angular.js 'ng- grid‘数据网格，并试图使其行为具有响应性。当我调整屏幕大小时，我希望网格列可以自动堆叠，而不是保持网格的固定宽度。
我发现有几个链接提到了一个废弃的ngGridLayoutPlugin，这些链接都导致了GitHub上的死胡同。我也见过像angular-deckgrid这样的其他网格，但我对改变网格不感兴趣。
有没有什么方法可以让ng-grid响应呢？
浏览 0提问于2014-09-03得票数 8
回答已采纳
3回答
我正处于从1.2.*到1.3.*的过渡过程中，我遇到了一个非常奇怪和的关键错误。
在我的应用程序中，我有一个非常简单的directive包含一个带有ng-class (条件到范围属性的条件)的template，原因是它不适用于1.3.*版本，而它在1.2.*版本中工作得很好。
看看这个来说明这个问题。
这个Plunker代码有角1.2.*版本，正如你所看到的，它工作得很好。
尝试更改角版(index.html)
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
浏览 4提问于2015-01-20得票数 15
回答已采纳
2回答
在代码中，ng-change不工作，它给出一个错误。为什么？每次选择的值发生变化时，我都需要执行show()方法。此外，下面的div标记应仅在选择有效列表值后才可见。
<div class="form-group">
<label>SOURCE</label>
<select class="form-control" name="ddlFirst" ngmodel="ddlSource" ng-change="show()">
<option val
浏览 0提问于2015-10-10得票数 1
我使用以下html代码创建ng-重复：
<td ng-repeat="parentCategory in totalParentCategoriesCount | orderBy :'-Count'">
<h3>
<a href="" ng-click="order('CategoryParent{{parentCategory.Count}}')">Kategori</a>
<span class="sortor
浏览 1提问于2015-07-24得票数 1
回答已采纳
我开始使用角，并尝试制作一个简单的编辑表单，以便与restful交互。
我处理了几个小时的问题.在处理选择选项时，角不能很好地填充我的表单。这似乎是一个类型的问题。
资料来源可在github上查阅：
这是一个Laravel /..。相关的文件应该是/tree/master/public/assets/js/angular/admin
和
/blob/master/public/views/category/admin/edit.html
非常感谢你的帮助..。
浏览 2提问于2016-02-25得票数 0
回答已采纳
1回答
嵌套ng-重复复选框
、、、
我正在创建带有嵌套ng重复的表，但是每个列中的复选框在被选中/未选中时具有同步反应。如何修复此行为，以便每个复选框都可以单独检查？
HTML：
<tr ng-repeat="person in persons | orderBy: 'secondName'">
<td>
{{person.firstName + ' ' + person.secondName}}
</td>
<td ng-repeat="day in person.daysOfWeek
浏览 0提问于2015-03-04得票数 0
回答已采纳
2回答
对于常规的html选择菜单，如果您创建了一个具有selected和disabled属性的选项元素，并给出了该选项的文本，那么该文本将默认显示在选择菜单中。下面是基本的html： <select name="myname">
<option selected disabled>Select one...</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</o
浏览 9提问于2020-03-31得票数 1
回答已采纳
2回答
分页ng-仅在第一页显示数据
、、、、
我试图用angularjs显示一个带有分页的列表，但是只显示第一页，其他的都是空的。你能帮帮我吗?
这是我的代码：
Controller.js：
angular.module('Client').controller('ListaInventarioCtrl', function($scope, $location, $filter, InventarioResource){
$scope.Inventarios = InventarioResource.query();
$scope.pageSize = 5;
$scope
浏览 20提问于2016-08-18得票数 0
1回答
我试图以3列表格格式显示数据。
使用下面的代码可以获得3列格式的数据，但我希望它在适当的表中，带有tr和td。
<body ng:app="myApp" ng:controller="myCtrl">
<span ng:repeat="(index, value) in array">
{{value}}<br ng:show="(index+1)%3==0" />
</span>
</body>
和
lvar app = ang
浏览 2提问于2015-04-13得票数 0
回答已采纳
2回答
我想要解决的情况就是这个，我对如何解决这个问题感到有点困惑。我在这里提到的每一点都使用ng-repeat，如果可能的话，我打算在最终的解决方案中使用这一点。
我有一个对象数组，都是完全相同的格式。(安全地假设这是真的)
每个对象都有一个属性列表。
我希望将这些列排列在一个大于2列的网格中，并且会有任意数量的行。
每个网格位置将显示该位置中对象的属性。
列数不需要动态变化。
>2列的要求是，我理解如何完成一个或两个列的网格布局(一列是无序的、没有样式的列表，两列使用ng-even或ng-odd并使用css创建新行)。
因此，问题基本上是这样的:对于大小为N的数组
浏览 6提问于2013-04-12得票数 5
回答已采纳
3回答
当我使用id中的ng-options循环列表并生成下拉列表时，是否有可能向option添加一个动态的attribut ng-options？如果我使用ng-repeat循环，它就能工作，因为在那里，我可以将attribut id直接放在option标记中，这是一个使用$index的增量。这在ng-options中也有可能吗？这是我的代码：
angular.module("myApp", []).controller("myController", function($scope) {
$scope.selectedOption1;
$scope.se
浏览 9提问于2016-11-17得票数 2
回答已采纳
我能把锚标签(<a>)放置在纳克开关-什么时候？下面是我的代码：，我想这样做：
<div ng-switch-when="Jquery">
<h3>Jquery</h3>
<a class="col-md-1 menu" ng-class="{active: tab == 'Angular'}" ng-click="tab='Angular'"><b>Angular</b></a>
浏览 2提问于2016-11-04得票数 1
回答已采纳
我知道这个解决方案不是很漂亮，但它是我正在工作的模板所需要的。
现在它起作用了，当产品在列表中时，它向我展示了“添加”span元素。
<section ng-repeat="product in products">
<label>
<input type="checkbox"
checklist-model="foobar.products"
checklist-value="product.id">
浏览 4提问于2015-08-20得票数 8
回答已采纳
1回答
我要重复一遍，上面列出了一天的时间安排。对于每一行，我需要显示可用的播放列表。
我遇到的问题是如何匹配这两个选项，以便在下拉列表中显示当前选定的项。
<div ng-repeat="daypart in dayparts track by $index" class="content_dayparts">
<div class="info_col_1">{{daypart.name}}</div>
<div class="info_col_2">
<select
浏览 3提问于2014-10-28得票数 2
回答已采纳
我试着在我的示例中加载一个json文件--SPA应用程序，但出于某种动机，我不明白为什么当我试图运行我的应用程序时，控制器不会填充我的浏览器选项卡……我是初学者，这是我试图解决这个问题的第二天，但我认为我的解决方案已经解决了。这里我的代码：
<html ng-app="beerApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="js/libs/ang
浏览 1提问于2017-02-21得票数 0
回答已采纳
我刚刚在我的角度项目中安装了ng引导程序，然后我就包含了它的模块。但我的CLI显示了一个错误。
“./node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js 9853中的警告:57-75”导出'ɵɵdefineInjectable‘在’角/芯‘中找不到“
app.module
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbPaginationModule, NgbAlertModule} from '@n
浏览 0提问于2019-06-28得票数 5
回答已采纳
1回答
我想在下拉列表中显示控制器的列表。数组是控制器变量，定义如下：
(function(angular) {
'use strict';
angular.module('staticSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
self = this;
self.options = [
{id: 1, label: "Item 1"},
{id: 2, la
浏览 3提问于2016-07-27得票数 1
回答已采纳
2回答
使用角度替换属性
、、
我对angular是个新手。
我的问题是，如果'ng- if‘得到满足，是否可以用'ng-show’替换'ng-hide‘？
我想根据我收到的数据隐藏和显示某些div。它要么是'true‘，要么是'false'，如果是'false’，div应该被隐藏，否则它应该显示。
浏览 0提问于2017-02-14得票数 0
我正在尝试修补ng-select下拉列表中的多个选定项。我没有指定任何bindValue，所以这些项应该通过object进行绑定(在中指定)
但在尝试执行此操作时，项不会根据对象而是根据显示的标签进行选择。而且，只有第一个标签会被选中。
示例: app.component.html
<form [formGroup]="group">
<div class="form-group" formGroupName="school">
<ng-select labelForId="schoo
浏览 21提问于2020-02-07得票数 0
回答已采纳
我有一个简单的模型，有一个名字列表和相应的图像。我试图点击图像的名称并加载相应的图像。我没办法把图像装上。名称列表显示在页面上，但当我单击它们时，不会发生任何事情。请帮忙处理密码。谢谢！
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="t
浏览 1提问于2018-09-21得票数 1
回答已采纳
可以改变ng模型值而不改变ng-更改函数吗？？下列方法不起作用
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field">
<div> {{field}} </div>
</div></div>
<script>
var myapp = angular.mod
浏览 1提问于2017-11-09得票数 1
回答已采纳
我已经将我的应用程序简化为下面的情况。我有两个选择框的实现，一个是硬编码选项，另一个是使用ng选项。
如果您选择一个主题，然后返回选择"None"，您将看到第二个示例的工作方式与第一个示例不同。我似乎无法正确地配置ng选项以获得第一个示例中的行为。所需的行为是在没有选择主题时显示friends和friends2列表中的所有项。
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs
浏览 6提问于2014-08-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
