AngularJS select options with id and array index

Question

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?

Nix · Accepted Answer · 2016-02-08 17:40:32Z

1

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
}

edited Feb 8, 2016 at 17:40

answered Feb 7, 2016 at 14:10

Nix

58.8k31 gold badges154 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3494047 Over a year ago

you're right about keeping track twice. thanks. I don't understand, however, where selectedId is coming from

Nix Over a year ago

Please explain? I renamed selectedId to selectedItem` because I didn't want it named incorrectly. In the change listener above you can set the $scope.selectedId = parent.id.

user3494047 Over a year ago

in your html you set the ng-change directive to change(selectedId) . What is this selectedId variable?

user3494047 Over a year ago

I still don't understand but I will accept your answer since you mention how I am keeping track of things unnecessarily.

Nix Over a year ago

@user3494047 thats just a typo i copied yours from above. I just updated the example and removed it because you can just reference selectedItem.

Alon Eitan · Accepted Answer · 2016-02-07 14:17:18Z

1

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

edited Feb 7, 2016 at 14:17

answered Feb 7, 2016 at 14:11

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

3 Comments

user3494047 Over a year ago

who is the change function called if you remove the ng-change directive?

Alon Eitan Over a year ago

@user3494047 this is just for changing the model from the controller, you have already binded selectedId in ngModel so angular does all the work for you when the user changes the value

user3494047 Over a year ago

Ah I see what you mean. Thanks.

Medet Tleukabiluly · Accepted Answer · 2016-02-07 14:12:57Z

-1

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>

answered Feb 7, 2016 at 14:12

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

2 Comments

user3494047 Over a year ago

Thanks, this does answer my question exactly as I wanted, even though I agree that I am keeping track of things twice unnecessarily so there is a better solution. I didn't down vote, though

Medet Tleukabiluly Over a year ago

@user3494047glad it solves your problem, maybe mark as answer tho

Collectives™ on Stack Overflow

AngularJS select options with id and array index

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related