How do I set the value property in AngularJS' ng-options?

Jukka Puranen

Here is what seems to be bothering a lot of people (including me).

When using the ng-options directive in AngularJS to fill in the options for a <select> tag, I cannot figure out how to set the value for an option. The documentation for this is really unclear - at least for a simpleton like me.

I can set the text for an option easily like so:

ng-options="select p.text for p in resultOptions"

When resultOptions is for example:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

It should be (and probably is) the most simple thing to set the option values, but so far I just don't get it.

Umur Kontacı

See ngOptions

ngOptions(optional) – {comprehension_expression=} – in one of the following forms:

For array data sources: label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr For object data sources: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

In your case, it should be

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Update

With the updates on AngularJS, it is now possible to set the actual value for the value attribute of select element with track by expression.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

How to remember this ugly stuff

To all the people who are having hard time to remember this syntax form: I agree this isn't the most easiest or beautiful syntax. This syntax is kind of an extended version of Python's list comprehensions and knowing that helps me to remember the syntax very easily. It's something like this:

Python code:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

This is actually the same syntax as the first one listed above. However, in <select> we usually need to differentiate between the actual value in code and the text shown (the label) in a <select> element.

Like, we need person.id in the code, but we don't want to show the id to the user; we want to show its name. Likewise, we're not interested in the person.name in the code. There comes the as keyword to label stuff. So it becomes like this:

person.id as person.name for person in people

Or, instead of person.id we could need the person instance/reference itself. See below:

person as person.name for person in people

For JavaScript objects, the same method applies as well. Just remember that the items in the object is deconstructed with (key, value) pairs.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How do I set available options for a property?

From Dev

how do i filter items by property in ng-options?

From Dev

How do I set a prompt on a select using ng-options?

From Dev

How do I disable options in angularjs with ng-options when using select as label

From Dev

How to set the value property in AngularJS

From Dev

How to set default value in ng-options

From Dev

how to set the value of an option when using ng-options in a select with angularjs

From Dev

How do I assign value with quote in angularjs with ng-init

From Dev

How do I assign value with quote in angularjs with ng-init

From Dev

Angularjs - set the default value for select without ng-options

From Dev

Angularjs - set the default value for select without ng-options

From Dev

How do I set ng-option model to the value of an object?

From Dev

How do I set ng-option model to the value of an object?

From Dev

How do I set a dbus property to a negative value with busctl?

From Dev

how can i change the options value with angularjs

From Dev

How do I set default value of select box in angularjs

From Dev

AngularJS Select and ng-options: Can I bind and object to ng-model while only displaying a property?

From Dev

AngularJS: Select with ng-options- how to pass value as integer?

From Java

How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?

From Dev

How do I set JVM options for GradleWorkerMain?

From Dev

How do I set the Java options for Kafka?

From Dev

How do I set the compiler options?

From Dev

How to set a default value to ng-options (multiple select)

From Dev

How to set the closed dropdown value on an ng-Options

From Dev

How to set the closed dropdown value on an ng-Options

From Dev

How to set property of selected ng-options item with ng-model

From Dev

AngularJS use ng-options to create a Set

From Dev

AngularJS: Can't I set a variable value on ng-click?

From Dev

AngularJS : How do I properly set a service property from model data in a controller?

Related Related

  1. 1

    How do I set available options for a property?

  2. 2

    how do i filter items by property in ng-options?

  3. 3

    How do I set a prompt on a select using ng-options?

  4. 4

    How do I disable options in angularjs with ng-options when using select as label

  5. 5

    How to set the value property in AngularJS

  6. 6

    How to set default value in ng-options

  7. 7

    how to set the value of an option when using ng-options in a select with angularjs

  8. 8

    How do I assign value with quote in angularjs with ng-init

  9. 9

    How do I assign value with quote in angularjs with ng-init

  10. 10

    Angularjs - set the default value for select without ng-options

  11. 11

    Angularjs - set the default value for select without ng-options

  12. 12

    How do I set ng-option model to the value of an object?

  13. 13

    How do I set ng-option model to the value of an object?

  14. 14

    How do I set a dbus property to a negative value with busctl?

  15. 15

    how can i change the options value with angularjs

  16. 16

    How do I set default value of select box in angularjs

  17. 17

    AngularJS Select and ng-options: Can I bind and object to ng-model while only displaying a property?

  18. 18

    AngularJS: Select with ng-options- how to pass value as integer?

  19. 19

    How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?

  20. 20

    How do I set JVM options for GradleWorkerMain?

  21. 21

    How do I set the Java options for Kafka?

  22. 22

    How do I set the compiler options?

  23. 23

    How to set a default value to ng-options (multiple select)

  24. 24

    How to set the closed dropdown value on an ng-Options

  25. 25

    How to set the closed dropdown value on an ng-Options

  26. 26

    How to set property of selected ng-options item with ng-model

  27. 27

    AngularJS use ng-options to create a Set

  28. 28

    AngularJS: Can't I set a variable value on ng-click?

  29. 29

    AngularJS : How do I properly set a service property from model data in a controller?

HotTag

Archive