开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

相关搜索:使用ng-options获取数组中的属性 js获取数组的索引从group中的JS数组中获取索引计数如何从嵌套数组中获取选定的索引？Angular - Javascript Angular :如何访问数组中的索引键值获取数组中的子数组的轮廓索引为什么ng-options返回Angular.js中国家、州、城市的嵌套json数组中的对象？在Ruby中从排序中获取数组索引获取数组中特定项的索引如何获取数组中项的索引从监视的数组中获取索引获取数组中数字的匹配索引在Angular中从数组中获取数据拼接获取两个条件(在不同数组上)为真的数组索引无法在Angular js中获取承诺 Angular Run * in用于数组中定义的特定索引获取JSON数组中的索引的For循环在python中获取现有索引的索引获取项的索引并将索引放入不同的数组中如何通过*ngFor在angular 5中的索引获取json值

相关搜索:

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

有帮助

没帮助

相关·内容

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指令来创建一个下拉列表，列表通过对象和数组循环输出　　　　　　实例：　　　　　　　　的值在key-value对中的value 　　　　　　　　　　value 在key-value 对中也可以是个对象；　　　　　　　　　　实例　　　　　　　　选择的值在key-value...在表格中显示数据　　　　　　使用angular显示表格是非常简单的　　　　　　　　实例　　　　　　　　　　的域名）上获取数据就需要使用跨域HTTP请求。　　　　　　...跨域请求在网页上非常常见。很多网页从不同服务器上载入CSS，图片，Js 脚本等。

3.3K5 0

【AngularJS】 # AngularJS入门

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

23.2K6 0

JS实现获取鼠标在画布中的位置

JS实现获取鼠标在画布中的位置效果展示概述本文讲解如何实现我们平时用的画布软件中，怎么获取的我们鼠标时刻在画布中的位置。...// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) /.../ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置就是这么实现的 var box = document.querySelector...// 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) /.../ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置就是这么实现的 var box = document.querySelector

630 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> angular.js/1.6.8/angular.js...在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :）和参数的格式添加。.../1.6.8/angular.js'>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 指令对于集合中（数组中）的每个项会克隆一次...应用中最常用的服务 $timeout服务 $timeout服务对应了JS window.setTimeout函数 $interval服务 $interval服务对应了JS window.setInterval...+ 1 }} {{ x.Name }} {{ x.Country }} SQL 使用PHP从MySQL中获取数据

5.6K2 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 }); } } //// 获取已有城市列表中城市

7750 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.5K4 0

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

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

2093 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

6792 0

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

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

7.3K3 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 　　　　　　　　描述：在列表中指定　　　　　　　　　　实例：使用数组元素填充下拉列表：　　　　　　　　ng-options指令使用数组来填充下拉列表,多次情况下与ng-repeat 指令一起使用。　　　　　　　　　　　　　　...语法：　　　　　　　　　　参数值：值： array expression 描述：数组中为select

3.1K10 0

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

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

2.3K2 0

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

应用场景生成带二维码的推广海报图片旧方法: 将用户自己的推广连接先通过qrcode.js生成二维码，然后再用后台返回的一张背景图片和二维码通过canvas绘制成一张海报。...问题在部分安卓手机上获取二维码图片后，onload事件不起作用，代码演示如下。JS只需要获取后台返回的base64二维码和海报绘制再生成图片，最后安卓苹果手机都能显示了。1....前端显示二维码，并js获取重新绘制js生成二维码在部分安卓机上无法获取到二维码图片资源最后onload不到

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

5112 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.4K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭