CODEWITHSUNDEEP
javascriptangularjs
user3494047
user3494047

Reputation: 1693

AngularJS select options with id and array index

I want to have a drop down select box with options coming from an array and I want to have access to the some property of the selected option and the array index.

So, for example I have an array:

selectOptions = [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}];

and when one of the options is chosen I want to have access to the selected option's id and index position in selectOptions. Right now I have this for selecting the id:

<select name="currentlySelected" ng-model="selectedId" ng-options="cat.id as cat.name for cat in selectOptions" ng-change="change(selectedId)">
</select>

But I also want to send as an input to the change function the index of the selected option in the selectOptions array. I want to be able to do this:

$scope.change = function ($parentId, $arrayId) {
 $scope.currentlySelected = $scope.selectOptions[$arrayId];
 $scope.selectedId = $parentId;
};

Does someone know how to do this?

Upvotes: 1

Views: 2050

Answers (3)

Nix
Nix

Reputation: 58522

Before I give you a solution I want to first suggest that you dont do what you are trying to do. You are basically keeping track of the same thing twice. You want the selected object and the selected id. If you keep track of the selected object you always have the id as well. I would suggest you try to keep track of just the selected object. When you need the id just use object.id

Why dont you select the object and then sync the property: 

<select name="currentlySelected" ng-model="selectedItem" 
        ng-options="cat as cat.name for cat in selectOptions"
        ng-change="change()">
</select>

Then in your code

$scope.change = change;

function change() {
   $scope.selectedId = $scope.selectedItem && $scope.selectedItem.id
}

Upvotes: 1

Alon Eitan
Alon Eitan

Reputation: 12025

You can use the object as the value reference:

<select name="currentlySelected" ng-model="selectedId" ng-options="cat as cat.name for cat in selectOptions"> <!-- You don't need the ng-change, it's not neccecary -->

And in your controller, you need to save a the reference to the object in the array:

$scope.change = function ($arrayId) {
     $scope.currentlySelected = $scope.selectOptions[$arrayId];
     console.log($scope.selectedId);  // THE MODEL HOLES THE OBJECT ITSELF
 };
 $scope.change(1); // EXAMPLE for changing the value from the code

Upvotes: 1

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Check the sample below, this should help you to get things done

ng-options="{catId: cat.id, index: idx} as cat.name for (idx, cat) in selectOptions"

angular.module('app', []).run(function($rootScope){
  $rootScope.selectOptions = [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<select name="currentlySelected" ng-model="selectedId" ng-options="{catId: cat.id, index: idx} as cat.name for (idx, cat) in selectOptions">
</select>
  <p>
    selectedId: {{selectedId}}
  </p>
</div>

Upvotes: -1

Related Questions