angularjs - 无法获取 AngularJs 中所选项目的索引

标签 angularjs angularjs-ng-change

我有一个包含值的下拉菜单,我正在使用下拉框来显示项目。我想处理单击事件并打印数组中元素的索引。查看代码如下:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="font-awesome@4.5.0" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">     </script>
    <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">
    <select ng-options="item for item in items" ng-model="item" ng-change="handleClick($index)">
  </select>

</html>

在 Controller 上我有该功能,但我没有在选择时获取索引。

// Code goes here

angular.module("myApp", []).

controller("myController", function($scope){
     $scope.handleClick = function(index){
     console.log("came inside the handleClick function with the currext index "+index);
    }
    $scope.items=["pradeep","praveen", "sagar","vinod"];
})

请让我知道我哪里出错了。链接到 Plunkr - Link to Plnkr

最佳答案

使用 ngOptions 时未定义

$index - 最好的选择是使用 indexOf 并查找索引:

<select ng-options="item for item in items" ng-model="selectedItem" ng-change="handleClick(selectedItem)">

还有 JS:

$scope.handleClick = function(selectedItem) {
    var index = $scope.items.indexOf(selectedItem);
}

关于angularjs - 无法获取 AngularJs 中所选项目的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34635075/

相关文章:

angularjs - 选中复选框 ng-change 第一次不会触发

javascript - 单击外部/esc时,Angularjs Bootstrap模式关闭调用

javascript - 根据字符串检查 ng-model 的值并执行函数

javascript - Angular : update scope inside scope

angularjs - 如何使 angularjs ngChange 处理程序仅在用户完成输入时调用

angularjs - 在 ng-change 中传递对象键

javascript - `getService`中的 `injector.js`如何从 Angular 中的调用者访问局部变量?

AngularJS Select Box 数组为对象时预选

javascript - 如何在服务中封装单个事件和临时事件?

angularjs - Spring Security REST 和 Angular