24

I am attempting to use an array of objects

 (array = [{name: 'Moe', id:1}, {name: 'Larry', id:2}, {name: 'Curly', id:3}]) 

as a drop-down selection within an AngularJS input form, and I need an example badly. Can anyone point me to a jsFiddle that can enlighten me?

1
  • If you want a jsFiddle, just go to the AnglarJS documentation on select docs.angularjs.org/api/ng.directive:select scroll down to the example given, and hit the Edit button and choose jsFiddle. Job done. Commented Feb 12, 2013 at 0:29

3 Answers 3

87

I would recommend using ng-options where you can.

<select ng-model="choice" ng-options="x.id as x.name for x in array"></select>

Because check this out: You can use it to select actual objects:

app.controller('ExampleCtrl', function($scope) {
    $scope.items = [
        { id: 1, name: 'Foo' },
        { id: 2, name: 'Bar' }
    ];

    $scope.selectedItem = null;
});
<div ng-controller="ExampleCtrl">
    <select ng-model="selectedItem" 
            ng-options="item as item.name for item in items"></select>

    {{selectedItem | json}}
</div>

In the above example when you select something from the drop down, it's actually setting an entire object reference on selectedItem rather that just a value type.

NOTE: using ng-options sets your value="" attributes to the indices of the items in your collections this is by design.

It's really the best way to do it.

EDIT: more context as requested. Also here's a plunker showing it in use

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

8 Comments

I hate to be a nag, but could you give me some more context, such as where the controller is referenced in the html?
is it possible with ng-options to add another option without id as a label? with the method in my answer below you can simply add another option outside of ng-repeat: <option value="">Choose Something</option>
Thank you for this code, I am just starting with Angular and I am struggling to understand what "item" is in your second ng-options example as it isn't mentioned in the script, what's it for and is it necessary?
so ng-options is like this... [value] as [text] for [variable] in [collection] ... so item as item.name for item in items is the same as x as x.name for x in items.
@BenLesh - I just wanted to say that your simple explanation and pseudo-code helped explain for me, in one line, what pages of verbose explanation have failed to do. They should add this single line to the documentation. Thank You!!
|
21
<select ng-model="choice">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

or use 'ng-options' - http://docs.angularjs.org/api/ng.directive:select

5 Comments

There's no reason to downvote this answer... it will work just fine, and in some cases it might be what people want.
I'm not the person who downvoted, but there are cases where this won't work properly. In particular, if the select ng-model is not a string value.
I want to downvote but don't want to be rude. If you do this, then angular will bite you in the ass when you least expect it. I really wish this would work, but they had to go an obfruscate this directive to death.
Somehow, I get bad json in value if this child property)
This case was the best solution in my scenario.
2
<dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>


<pre>selected roles = {{selected_items | json}}</pre>

1 Comment

If you add few lines of explanatory text you may receive a much higher feedback for this answer!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.