开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在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函数返回选中项在数组中的索引。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。

相关搜索:Angular :如何访问数组中的索引键值 Angular Run * in用于数组中定义的特定索引 Drupal 8在twig上的循环上获取索引 js获取数组的索引为什么ng-options返回Angular.js中国家、州、城市的嵌套json数组中的对象？从group中的JS数组中获取索引计数从监视的数组中获取索引使用ng-options获取数组中的属性在angular js中获取datepicker指令的值在Angular中从数组中获取数据拼接

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularJS 使用ngOption实现下拉列表

本篇根据文中代码，详细讲述下如何实现下拉列表更多内容参考：AngularJS知识总结下拉列表的简单使用 ng-option指令使用很简单，只需要绑定两个属性：一个是ng-model用于获取选定的值...；另一个是ng-options用于确定下拉列表的元素数组。..."> 上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定，然后列表中的选项是activities中的每一个值。...} }; 当然也可以直接指定成： $scope.engineer = {currentActivity:activities[3]} 然后在指令中可以循环列表拼接处下拉框的名称...当你选择一个下拉列表选项的时候，就会覆盖掉这个初始值。所以更多的时候会使用一个id进行标识，这样在初始化赋值的时候，只需要设定一个id就可以了。

2.2K10 0

Angularjs基础(五)

使用ng-options创建选项框　　　　在AngularJS 中我们可以使用ng-option指令来创建一个下拉列表，列表通过对象和数组循环输出　　　　　　实例：　　　　　　　　<div...你选择的值在key-value对中的value 　　　　　　　　　　value 在key-value 对中也可以是个对象；　　　　　　　　　　实例　　　　　　　　选择的值在key-value...在表格中显示数据　　　　　　使用angular显示表格是非常简单的　　　　　　　　实例　　　　　　　　　　<div ng-myApp="myApp" ng-controller="customersCtrl...（不同<em>的</em>域名）<em>上</em><em>获取</em>数据就需要使用跨域HTTP请求。　　　　　　...跨域请求在网页<em>上</em>非常常见。很多网页从不同服务器上载入CSS，图片，<em>Js</em> 脚本等。

3.3K5 0

【AngularJS】 # AngularJS入门

的情况 ng-pristine 控件为初始状态 3.6. ng-repeat指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。...Scope作用范围根作用域：$rootScope 作用在 ng-app 指令包含的所有HTML元素中用 $rootScope 定义的值，可以在各个controller中使用 <div ng-app=...外部文件中的控制器将标签中的代码复制到 **.js 的外部文件中 HTML中进行引入即可 x in sites 为循环数组 ==> x.site 为显示在下拉框中的内容 --> var app = angular.module...-- 载入实现路由的 js 文件 --> </script

23.2K6 0

angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

本次做一个简单的关于动态生成select的练习　　在实现上有两种方式：　　　　其一、通过ng-repeat来实现　　　　其二、通过ng-option来实现　　　　在页面效果上，两种实现的效果都一样...　　　　但是在数据选择的数据从操作上有所不同　　　　ng-repeat选中的是其option对应的value值　　　　ng-option选择的是其对应绑定数据的一个object对象　　在实际应用中建议采用...实现 <select ng-model="city" id="selectCity1" ng-options="city1.name for.../JS/angular.js"> var app = angular.module("myApp", []);...{ name: $scope.newCityName, id: $scope.getCityMaxId() + 1 }); } } //// 获取已有城市列表中城市

1.5K2 0

js获取数组中的最大值最小值

1,2,3,5]; console.log(Math.max.apply(null, a));//最大值 console.log(Math.min.apply(null, a));//最小值多维数组可以这么修改...： var a = [1,2,3,[5,6],[1,4,8]]; var ta = a.join(",").split(",");//转化为一维数组 console.log(Math.max.apply

36.4K5 0

11-angular 实例学习-2

ID是:{{formData.channelId}} div> script> var app = angular.module('myApp', []); app.controller('myCtrl.../1.6.8/angular.js'>script> //模型 var app = angular.module...适用于监听数组或者监听的是一个对象上的所有属性。

2.2K4 0

【一起来烧脑】一步学会AngularJS系统

指令允许自定义指令 ng-model 指令把元素值绑定到应用程序在输入框中输入：...{{ x }} ng-repeat指令用在一个对象数组上： <div ng-app="" ng-init="...根元素 ng-init 指令为 AngularJS 应用程序定义了初始值 ng-model 指令绑定 HTML 元素到应用程序数据 ng-repeat 指令对于集合<em>中</em>（<em>数组</em><em>中</em>）<em>的</em>每个项会克隆一次...应用中最常用<em>的</em>服务 $timeout服务 $timeout服务对应了<em>JS</em> window.setTimeout函数 $interval服务 $interval服务对应了<em>JS</em> window.setInterval...+ 1 }} {{ x.Name }} {{ x.Country }} SQL 使用PHP从MySQL<em>中</em><em>获取</em>数据

5.5K2 0

angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

本次做一个简单的关于动态生成select的练习　　在实现上有两种方式：　　　　其一、通过ng-repeat来实现　　　　其二、通过ng-option来实现　　　　在页面效果上，两种实现的效果都一样...　　　　但是在数据选择的数据从操作上有所不同　　　　ng-repeat选中的是其option对应的value值　　　　ng-option选择的是其对应绑定数据的一个object对象　　在实际应用中建议采用...实现 <select ng-model="city" id="selectCity1" ng-options="city1.name for.../JS/angular.js"> var app = angular.module("myApp", []);...{ name: $scope.newCityName, id: $scope.getCityMaxId() + 1 }); } } //// 获取已有城市列表中城市

7690 0

AngularJS Select(选择框)

---- 使用 ng-options 创建选择框在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例: 实例 ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options...}} 当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。...}} 你选择的值为在 key-value 对中的 value。...value 在 key-value 对中也可以是个对象：实例选择的值在 key-value 对的 value 中, 这是它是一个对象: $scope.cars = { car01 : {brand

2.4K4 0

轻松构建灵活的表单，试试AngularJS 选择框

在Web开发中，表单是一个非常重要的组件。表单通常包含各种输入字段，例如输入框、复选框和选择框等，用于收集用户的输入数据。AngularJS 提供了一系列的指令和服务，使得表单的开发更加简单、高效。...AngularJS Select 指令在 AngularJS 中，我们可以使用 ngOptions 指令创建选择框。...然后，在 HTML 中使用 ng-options 指令创建选择框，并通过 ng-model 指令实现数据绑定。最后，我们使用双花括号语法展示选择的选项。...动态生成选项在实际开发中，选择框的选项通常是动态生成的。AngularJS 提供了多种方式来实现动态生成选项的功能。...我们使用 ngRepeat 指令迭代 options 数组，并动态生成选择框的选项。

1813 0

ng-options在IE上数据不改变的问题

最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源，并且被套在ng-switch（ng-transclude）之类的，当angular上得ng-options数据源...model改变后，在IE上并不渲染。...在一阵的测试和阅读相关文档后最后确认为：因为ng-switch（ng-transclude）是为了使其scope为原来的父scope，在父scope上生成了DOM后才克隆(cloneNode)到指定的指令位置...问题确定了，那我们所需要做的就是手动的去触发让IE对Select重绘，尝试了很多办法后最终确认有效的是：首先在options上用原生js去添加一个option，在马上移除掉这个option，所以解决方案如下...： angular.module('ie.select', []) .directive('ieSelectFix', [ function () { return

6732 0

VBA：获取指定数值在指定一维数组中的位置

文章背景：在采用VBA抓取数据时，有时需要判断指定数值是否在一维数组中已存在；如果存在，则希望能够获取该数值在数组内的位置。...在实践过程中发现，VBA的filter函数无法完全匹配指定数值；而借助Excel的match函数，可以实现完全匹配。接下来分别对Filter函数和Match函数进行介绍。...Filter 函数根据指定的筛选准则，传回包含字串阵列子集的以零为基础的阵列。...默认采用的是vbBinaryCompare选项。应用示例：判断某字符串是否在一维数组内存在。由上图可以看出，采用Filter函数匹配到的是包含A-1的所有元素。...而在实际案例中，可能希望只获得完全匹配的元素。 WorksheetFunction.Match 方法傳回項目在陣列中的相對位置，其符合指定順序中的指定值。

7.1K3 0

前端MVC学习总结（二）——AngularJS验证、过滤器、指令

语法格式如下： {{ express | filter:parameter1:p2:p3… | … | …}} 过滤器分了内置过滤器与自定义过滤器，过滤器的调用方式也分了在模板中调用与在函数中调用。...2.1.2、在脚本中调用过滤函数在函数中调用过滤器的方法是：在控制中添加对$filter的依赖，$filter("过滤函数名称")(被过滤对象,'参数') 示例代码： <!...点击价格与名称可以进行排序，排序时显示向上或向下的箭头，在搜索框中可以输入查询条件过滤数据。验证搜索框中的内容只能是字母与数字，不允许输入其它类型的字符。...练习2：请自定义一个过滤器实现敏感关键字过滤，在过滤器中可以准备一个敏感词数组，将敏感词替换成指定的符号，默认为*号。...这是angular支持基于“视图-模型-控制器”设计模式原则的主要方面。 Angular中的MVC组件有：模型 — 模型是一个域的属性集合；域被附加到DOM上，通过绑定来存取域属性。

15.4K6 0

Angularjs基础(十二)

ng-model-options 　　　　　　描述：规定如何更新模型　　　　　　　　　　　　实例：在失去焦点时绑定输入框的值scope 变量中。　　　　　　　　　　　　　　　　...ng-mousemove 　　　　　　　　　　描述：规定鼠标指针在指定的元素中移动时的行为。　　　　　　　　　　　　实例：在鼠标指针在元素上移动时执行表达式。　　　　　　　　　　　　...ng-options 　　　　　　　　描述：在列表中指定　　　　　　　　　　实例：使用数组元素填充下拉列表：　　　　　　　　<div ng-app="myApp...<em>ng-options</em>指令使用<em>数组</em>来填充下拉列表,多次情况下与ng-repeat 指令一起使用。　　　　　　　　　　　　　　...语法：　　　　　　　　　　参数值：值： array expression 描述：<em>数组</em><em>中</em>为select

3K10 0

7-进军 angular1.x 表单和事件、模块

现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。...("myApp", []); app.directive("runoobDirective", function() { return { template : "我在指令构造器中创建...}; }); script> 复制代码模块和控制器包含在 JS 文件中通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。...在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器： AngularJS 实例 script> {{

2.3K2 0

解决在页面中无法获取qrcode.js生成的base64的图片

应用场景生成带二维码的推广海报图片旧方法: 将用户自己的推广连接先通过qrcode.js生成二维码，然后再用后台返回的一张背景图片和二维码通过canvas绘制成一张海报。...问题在部分安卓手机上获取二维码图片后，onload事件不起作用，代码演示如下。<!...(10,10)为起始点，绘制图像ctx.drawImage(img, imgX, imgY,imgW,imgH); // js生成二维码在部分安卓机上无法获取到二维码图片资源最后onload不到

1681 0

AngularJS in Action读书笔记1——扫平一揽子专业术语

回想jQuery还需要通过在DOM中找到需要的元素并在其上添加事件监听，通过触发事件（如点击等）才能解析获取DOM元素中的值。...而在AngularJS中只需要将DOM中的元素与js的某个属性绑定，js属性值变化会同步到DOM元素上，同样的，DOM元素值得变化也会映射到js的属性上。夸张点说，一个是刀耕火种，一个是蒸汽驱动。...，比如有些数据在多个controller中都会用到，就可以定义在一个service中 ?...代码中第一行就是创建module var myModule = angular.module('Angello', []); app.js var myModule = angular.module...如index.html中的{{main.tite}}对应定义在controller中的title，title的任何变化都会及时的相应在index.html上。

1.2K7 0

10-angular 实例学习-1

ng-click="">paybutton> div> div> script> var app = angular.module('myApp',[]); app.controller...：var s = new myService();，只要把属性和方法添加到this上才可以在controller里调用。... 使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。... 当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

4982 0

Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

ngFor循环的使用: 属性index、count、first、last、even、odd index属性提供当前对象的索引 count提供当前数据集的长度，类似于datasource.length...ng-if判断使用： //在angular中没有else只能都通过ng-if来判断准备中进行中...HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 在应用中包含 HTML 文件 ng-init 定义应用的初始化值...将文本转换为列表 (数组) ng-model 绑定 HTML 控制器的值到应用数据 ng-model-options 规定如何更新模型 ng-mousedown 规定按下鼠标按键时的行为 ng-mouseenter...ng-mouseup 规定当在元素上松开鼠标按钮时的行为 ng-non-bindable 规定元素或子元素不能绑定数据 ng-open 指定元素的 open 属性 ng-options 在 <select

5.3K4 1

前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

一、前端MVC概要 1.1、库与框架的区别框架是一个软件的半成品，在全局范围内给了大的约束。库是工具，在单点上给我们提供功能。框架是依赖库的。AngularJS是框架而jQuery则是库。...、使用cdn 3)、安装node.js，使用npm获取示例代码： <!...4、HelloController可以获取它所需要的$scope对象，则没有必要去创建它，依赖注入 5、当文本框中的值发生变化时$scope对象中的值立即变化，模型与视图双向绑定 6、没有必要自己调用HelloController...2.7、ng-repeat迭代 ngRepeat指令为集合中的每项实例化一个模板。每个模板的实例拥有自己的域，使用循环变量指向当前集合项上，$index指向当前项的索引或键值。...如果表达式结果为一个数组，则数组中每个元素为使用空格分隔的一个或多个类名字符串。如果表达式结果为一个对象，对象中的每个key-value中如果键值为真时则键名作为类名。

15.3K10 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭