在Angular JS中获取ng-options上的数组索引
在AngularJS中，可以通过使用ng-options指令来创建一个下拉列表，并获取选中项的数组索引。ng-options指令可以用于动态生成<select>元素的选项。
要获取ng-options上的数组索引，可以使用ng-model指令来绑定一个变量，然后在控制器中使用该变量来获取索引。
以下是一个示例代码：
<select ng-model="selectedOption" ng-options="item as item.name for item in options"></select>在上面的代码中，ng-options指令使用item as item.name for item in options的语法来生成选项。options是一个数组，每个元素都有一个name属性。
在控制器中，可以通过$scope.selectedOption来获取选中的项的值。要获取数组索引，可以使用indexOf方法来查找选中项在数组中的位置。
以下是一个完整的示例代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.options = [{
name: 'Option 1'
},
{
name: 'Option 2'
},
{
name: 'Option 3'
}
];
$scope.selectedOption = $scope.options[0];
$scope.getSelectedIndex = function() {
return $scope.options.indexOf($scope.selectedOption);
};
});
</script>
</head>
<body>
<div ng-controller="myCtrl">
<select ng-model="selectedOption" ng-options="item as item.name for item in options"></select>
<p>Selected Index: {{getSelectedIndex()}}</p>
</div>
</body>
</html>在上面的代码中，$scope.options是一个包含三个选项的数组。$scope.selectedOption绑定了选中的项，默认为数组的第一个元素。$scope.getSelectedIndex函数返回选中项在数组中的索引。
这是一个简单的示例，你可以根据实际需求进行修改和扩展。
相关·内容
我正在尝试获取AngularJS (1.3)的索引(数组键) ng-options，而不是ticketId ng-options="itemList.ticketId for itemList我尝试了不同的解决方案，但都没有成功。
浏览 9提问于2019-08-08得票数 0
2回答
我试图用AngularJS从HTML视图中检索所选的选项，但我找不到方法，因为我看到的所有解决方案都考虑了参数"value"，但我在这里没有它，因为我事先不知道选项列表的内容。
浏览 9提问于2018-03-05得票数 1
使用ng-repeat和$index如何使用angularjs显示默认的选定值"Jewelery_And_Diamond_Type": [ "id":: 31, }, "id": 30, } ]
<
浏览 1提问于2016-09-29得票数 1
1回答
我在这里的目标是将数据从数据库中加载到下拉列表中。例如，数据库中的数据是New Construction，我希望加载来自LoadDropdown函数的所有数据，并选择New Construction作为默认数据。<select name="ScopeofWork" class="form-control" ng-model="drpScopeWork" ng-options="SoW as SoW.labelfo
浏览 0提问于2019-07-08得票数 0
我在表单中有一个包含其他字段的<select>，比如- <div class="inputs"> <select class="inputTag" ng-model="selectedName"
浏览 4提问于2018-09-01得票数 0
2回答
我有一个包含年份的字符串列表，比如：我试图在select标记内的页面上呈现它，但是角一直破坏代码，将元素呈现在标记之外</option>我确实呈现了，但是生成的所有选项标记都在select标记之外。我在这里做错什么了吗？
编辑:使用AngularJS 1.5.3
浏览 0提问于2016-04-15得票数 0
回答已采纳
我正在尝试检索一个json对象数组，并在下拉列表中显示字符串，然后使用选定的字符串将其发送到服务器。
浏览 1提问于2018-10-01得票数 0
我有一个包含数百个选择元素的表单。当用户保存表单时，我将从JSON中保存，当他们重新加载JSON时，使用JS代理将其拉回原处。我正在寻找一种很好/干净的方法来设置JSON中的值的选项值。最好不枚举其中每一个的数组，并根据其匹配值的索引设置数组。模板：<div ng-controller="myCtr
浏览 2提问于2015-04-20得票数 1
回答已采纳
2回答
我已经将select声明为这样(jade语法)状态初始化为 {name:'Active', value:1},];<select
浏览 6提问于2014-02-17得票数 0
回答已采纳
1回答
多降搜索滤镜角
、、
我在一个搜索引擎上工作，从3个下拉列表中获取输入。第一下拉列表是类别，第二是产品类型，第三是价格。每个下拉列表根据上一个下拉列表的选择填充自己，最终输出是一个匹配所有三个选择的产品。我使用webapi并将细节作为包含对象数组的json对象来接收。下面是一个使用类似结构json文件的演示柱塞：
我似乎不能过滤和输出从三个选定的下拉数据，任何帮助都将是非常见效的。<link rel="
浏览 0提问于2015-11-20得票数 1
回答已采纳
2回答
我已经有一两天的问题，试图让一个选择元素与我的angular模型一起工作。我认为第二种方法是正确的，它使用ng-options。模型中的其他所有内容都可以工
浏览 0提问于2016-01-08得票数 0
我目前正在尝试构建一个具有复杂数据结构的AngularJS应用程序。
数据源是一组具有语言和技能水平的人员。也许还有一种更简单/更好的方法来构造数据数组($scope.people)
浏览 3提问于2014-05-12得票数 3
回答已采纳
我有一个带有值的下拉列表，我使用下拉框来显示项目。我想要处理click事件并打印数组中元素的索引。视图代码如下： <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://co
浏览 3提问于2016-01-06得票数 3
我正在尝试使用ng-options填充一个从webapi获取数据的Select。基本上，我的webapi返回以下JSON： "items":[ "name":"X", },<html ng-app
浏览 1提问于2015-12-21得票数 0
我一直在学习AngularJS，但现在我所处的情况是，ng-options的值是未定义的，这些值显示在标签中。
我已经搜索了几个小时了，但我没有看到具体的解释什么时候会发生这样的事情。为了澄清这种情况，这里有一个简化的代码。<select ng-model="objA[{{$temp}}]" ng-options="i for i in objB[{{$temp}}] track
浏览 3提问于2017-02-21得票数 0
下面的代码显示了状态为new=1, old=2, declined=3 and expired=4的下拉列表。从表中获取status时，所有状态都会显示在下拉列表中。要求是对数据库中所有expired产品的dropdown执行disable操作，但在从UI中选择将状态从other statuses更改为expired时，不应禁用expired。 代码如下所示。<select class="uk-width-1-1 uk-form-small"
ng-
浏览 18提问于2019-02-07得票数 1
回答已采纳
在将select options中的ng-repeat更改为ng-options后，我遇到了一些问题。问题是ng-model发送的是整个数组，而不是选定的数组。我有一个名为sms的数组，它的值很少。var sms = ['1','2','3','4','5'];
这就是我在HTML<
浏览 3提问于2017-01-30得票数 0
<select class="form-control" ng-model="companyId" style="height: 40px;" ng-options="id for id in companyId">嗨，我在控制器中有一个数组scope.companyId，它填充了controller.array包含的结果，比如，1，2，3，我需要在dropdown.What中</
浏览 5提问于2017-03-21得票数 0
回答已采纳
我正在尝试传递当前选定项的索引，以便可以使用它的索引来深入挖掘一些嵌套数组。到目前为止我的情况是这样的。class="selectLevel1" ng-model="scope2" ng-change='scope2Change()'
ng-options='obj.name for obj in array3 tr
浏览 2提问于2014-08-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
