Как получить индекс выбранного параметра в <select>в angularjs

Question

Я новичок в коде angularJS.

Я пытаюсь отобразить раскрывающийся список, который покажет несколько вариантов.

Ниже моего элемента select я хочу отобразить некоторый текст на основе выбора пользователя из раскрывающегося списка.

Чтобы выбрать соответствующий текст, мне нужно знать индекс или позицию выбранного элемента из раскрывающегося списка.

Вот как мой код выглядит следующим образом.

<select name="selUsers"
        ng-model="activeUser"
        ng-options="user.name as user.name for user in userOptions"
        required>
    <option value="" disabled="disabled">
      Choose...
    </option>
</select>

<span>
//need to display text based on above selection
</span>

Может ли кто-нибудь помочь мне здесь, как я могу получить индекс выбранного элемента?

Спасибо.

Answer 1

Запустить функцию для проверки индекса при каждом изменении опции выбора ...

рабочий фрагмент ниже:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
  $scope.detectIndex = () => {
    for (var i = 0; i < $scope.names.length; i++) {
      if ($scope.names[i] == $scope.selectedName) {
        $scope.selectedIndex = i;
        return;
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl" ng-init="selectedIndex = null">
  <select ng-model="selectedName" ng-options="x for x in names" ng-change="detectIndex()">
    <option value="" disabled="disabled">
      Choose...
    </option>
  </select>
  <p>you selected: {{ selectedName }} at index: {{ selectedIndex }}</p>
</div>