Questions tagged [ng-options]

Related with AngularJS .HTML SELECT element with angular data-binding. Optionally ngOptions attribute can be used to dynamically generate a list of <option> elements for a <select> element using an array or an object obtained by evaluating the ngOptions expression.

ng-options
Filter by
Sorted by
Tagged with
455 votes
7 answers
464k views

Working with select using AngularJS's ng-options

I have read about it in other posts, but I couldn't figure it out. I have an array, $scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York'}, {ID: '000003', ...
Andrej Kaurin's user avatar
194 votes
5 answers
192k views

ng-options with simple array init

I'm a little bit confused with Angular and ng-options. I have a simple array and I want to init a select with it. But, I want that options value = label. script.js $scope.options = ['var1', 'var2', ...
Dragu's user avatar
  • 3,272
125 votes
7 answers
153k views

ng-change get new value and original value

I'm using ng-options to select values from a pulldown. I'd like to be able to compare the old value to the new value. ng-change works well for grabbing the new value of the pull down, but how can I ...
Bailey Smith's user avatar
  • 2,873
78 votes
3 answers
100k views

key-value pairs in ng-options

I need to use an associative array as data source for my select options using AngularJS. Is it possible to use an array like this? { "key1": "val1", "key2": "val2", "key3": "val3", .....
davioooh's user avatar
  • 24.2k
72 votes
8 answers
137k views

How to set the value attribute for select options?

Source JSON data is: [ {"name":"Alabama","code":"AL"}, {"name":"Alaska","code":"AK"}, {"name":"American Samoa","code":"AS"}, ... ] I try ng-options="i.code as i.name for i in regions" but ...
Paul's user avatar
  • 26.2k
65 votes
12 answers
72k views

Angularjs ng-options using number for model does not select initial value

I'm trying to use ng-options with a <select> to bind a numeric integer value to a list of corresponding options. In my controller, I have something like this: myApp.controller('MyCtrl', ...
BrandonLWhite's user avatar
60 votes
11 answers
90k views

ng-options with disabled rows

Is it possible to use ng-options that it will render into disabled rows based on criteria? this: <select ng-options="c.name group by c.shade for c in colors"> maybe possible to turn into ...
iLemming's user avatar
  • 35.3k
54 votes
1 answer
59k views

ng-options with object data source

I'm struggling to understand how ng-options works with a data source. I've read the docs and I feel like I'm doing exactly what is required, but I still get problems when attempting. <!...
colefner's user avatar
  • 1,821
53 votes
8 answers
56k views

How to set the first select option to always be blank

I am using angularjs in a project and in which I am using ng-options for generating <select>. Initially, when the pages reload and no option element is selected, the HTML generated like below: &...
arnold's user avatar
  • 1,702
49 votes
3 answers
68k views

Use filter on ng-options to change the value displayed

I have an array of prices (0, 0.99, 1.99... etc) that I want to display in <select>. I want to use Angular's ng-options like this <select ng-model="create_price" ng-options="obj for obj in ...
TidharPeer's user avatar
  • 3,777
48 votes
2 answers
30k views

How to ng-translate inside select box option in angularjs

How do I apply ng-translate to translate options inside a select box. For example: Template: <select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders"> &...
Rahul Prasad's user avatar
  • 8,152
33 votes
3 answers
112k views

Setting selected values for ng-options bound select elements

Fiddle with the relevant code: http://jsfiddle.net/gFCzV/7/ I'm trying to set the selected value of a drop down that is bound to a child collection of an object referenced in an ng-repeat. I don't ...
sonicblis's user avatar
  • 3,034
32 votes
2 answers
26k views

AngularJS - ngOptions: How to order by Group Name and then by Label

Let's assume I have the following data array in this form: var data = [{group:GroupA, label: BB}, {group:GroupB, label: DD}.....]. My binding would be something like: <select data-ng-options="c ...
T.Ho's user avatar
  • 1,190
30 votes
3 answers
80k views

How to filter a select with ng-options in Angular?

I've written the following proof-of-concept of an Angular app that allows a person to vote for President of the US. <!DOCTYPE html> <html ng-app="ElectionApp""> <head> <title&...
Vivian River's user avatar
  • 31.8k
30 votes
2 answers
50k views

angularjs select required not working ng-options

I am trying to ensure a user selects a value from a select box before submitting the form. This works correctly with static options; it however fails when populating the options via a model using ng-...
bytez's user avatar
  • 359
29 votes
2 answers
42k views

ngOptions "track by" expression

I am trying to use the 'track by' expression to track selections by id, in an array of objects. However, I can't seem to make it work like I think it works. //ids from server $scope.serverDTO = ['1','...
thebringking's user avatar
  • 1,349
26 votes
2 answers
39k views

AngularJS ngOptions sort array

I have been trying to use ng-options to display an array of fonts in a select sorted alphabetically by the value of the items in the array. HTML <select ng-options="font for font in webfonts | ...
Chris Bier's user avatar
  • 14.3k
26 votes
3 answers
42k views

Angularjs: ng-options group by

I have this one level tree situation: <select ng-model="tipost" ng-options="tip.DESC group by tip.TIPIS for tip in tipall"><br> </select> where the json is: [ {"ID":"1"...
daniel's user avatar
  • 1,152
19 votes
1 answer
11k views

Iterate with ng-options in a dictionary(object) [closed]

I need to iterate over the following object with ng-options: var a = { 'optionName1': 'optionValue1', 'optionName2': 'optionValue2', 'optionName3': 'optionValue3', 'optionName4': 'optionValue4', }; ...
Oleg Belousov's user avatar
16 votes
5 answers
4k views

Re-render ng-options after second-level change in collection

Problem I have a combo box, basically a select element that is filled with an array of complex objects by ng-options. When I update any object of the collection on second-level, this change is not ...
user1438038's user avatar
  • 5,921
15 votes
4 answers
64k views

How to set default value in ng-options

I can set a dropdown list with default value in angularjs as, <select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id"> <option ng-...
mpsbhat's user avatar
  • 2,743
15 votes
2 answers
47k views

How to use ng-click on ng-option( or other way to assign value)

How to use ng-options. $scope.fieldTable = [ { filed:"text", title:"Global" }, { field: "relatedentity", title: "Entity" }, { field:"title"...
Kuan's user avatar
  • 11.3k
15 votes
3 answers
31k views

AngularJs conditional display for ng-options

I've been searching for a few hours now and I can't seem to find the answer for my problem anywhere. I remember that I was able to implement it before but for some reason I lost the code and I can't ...
Stellaire's user avatar
  • 624
13 votes
1 answer
9k views

How to use an angularJs filter on items label within ng-options

Given a select list loaded with product options, I want the label to be in the format of option name and then price in parenthesis. So for example: "Product Option B ($1,432.12)". My option object ...
Ryan Langton's user avatar
  • 6,326
13 votes
2 answers
25k views

Angularjs - dynamic ng-options

For the need of a directive i'm writing, i have to construct dynamically the ng-options expression. Here is what i tried. In my directive: // ... scope.labelProperty = 'name'; scope.selectOptions = ...
Steph.D's user avatar
  • 133
12 votes
2 answers
51k views

Filter results in angularjs based on select value

This seems like it should be easy but I am new to angular and not grasping this concept very well. I am hoping to run an ng-repeat over a dataset and then be able to filter the results based on a ...
Starfs's user avatar
  • 450
10 votes
5 answers
68k views

How to disable a <option> of select element when using AngularJS ng-options?

Is there a way to disable an option in a select element when we populate options with ng-options in AngularJS? Like this: http://www.w3schools.com/tags/att_option_disabled.asp You can do it by ...
badaboum's user avatar
  • 853
10 votes
3 answers
24k views

Get old value and new value from dropdown

I'm trying to simply get the previous value, and the newly selected value from a drop-down. In this example, the drop-down is pre-populated with the current group the user is assigned. When the ...
Photovor's user avatar
  • 403
10 votes
4 answers
7k views

Filter uppercase with ng-options

I didn't find how to uppercase or uppercase first letter in ng-options. My select: <select ng-model="company.currency.code" ng-options="currency.code as currency.code for currency in ...
Syl's user avatar
  • 2,242
10 votes
4 answers
18k views

AngularJS dropdown not showing selected value

Am facing problem in displaying selected value in angular dropdown. it works when i give like this $scope.selectedItem = $scope.items[1]; not working, if i give directly that value $scope....
Raj Adroit's user avatar
  • 3,858
10 votes
1 answer
4k views

AngularJS select doesn't work without ng-model

Does anyone know why in AngularJS, the select selector doesn't work without the ng-model? <select ng-model="bla_bla" ng-options="obj.value as obj.key for obj in languages"/> <select ng-...
TidharPeer's user avatar
  • 3,777
10 votes
3 answers
13k views

AngularJS: ng-model switching int to string

I'm currently working on an app in Angular. So far, everything has been going -quite- well. I'm really, really new to angular and am amazed that it took so long for the first real roadblock. Situation:...
thisisboris's user avatar
10 votes
4 answers
2k views

Duplicates in ngOptions

I am using AngularJS version 1.4.7 and have simple AngularJS controller which contains array of objects. I would like to display these objects as options in select by ngOptions. The problem is that ...
Knut Holm's user avatar
  • 4,068
9 votes
4 answers
16k views

AngularJS ng-options to exclude specific object

I'm using angular ng-options to show a with several options as the choices of parent category of the current category, basically these options contain all the existing categories, and I need to ...
dulan's user avatar
  • 1,594
9 votes
1 answer
52k views

Filter ng-options from ng-options selection

I'm hoping to solve three problems... In my app page I have one select for states and another for counties. For states I have: <select ng-model="filter.stateID" ng-options="item.stateID as item....
webmaster_sean's user avatar
9 votes
1 answer
9k views

angular-translate ad ng-options

I'm trying to translate a select drop-down and I don't like the way I'm doing it, because it's cumbersome and it bypasses the whole angular-translate framework. The locale data looks like {"lang": {"...
Eddy's user avatar
  • 1,772
9 votes
3 answers
19k views

angularjs - Add multiple hard-coded options to select box with ng-options

I have a select box that is populated with ng-options. I know you can add a default option manually, like so: <select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || ...
EmmyS's user avatar
  • 12k
8 votes
4 answers
30k views

angularJS - add a Static option with ng-options

I am using ng-options to print all the options for a form in my angular app. I get the value directly from my database which gives me a list of countries: <select ng-options="country.country for ...
Spearfisher's user avatar
  • 8,575
8 votes
2 answers
34k views

AngularJS - setting selected value of dropdown does not work

I made a fiddle replicating my problem here: http://jsfiddle.net/U3pVM/2840/ As the title suggests, I can't set the selected value of a select populated using ng-options. I have searched and tried ...
OverMars's user avatar
  • 1,099
8 votes
2 answers
8k views

How do I use ngOptions with a string that contains HTML entities?

I'm using ngOptions to built a selection menu but one of my labels has an HTML entity in it &amp;. The label shows up as Books &amp; Stuff not Books & Stuff. My jade is this: select(ng-...
Justin808's user avatar
  • 21.3k
8 votes
2 answers
2k views

Two drop downs with same value. If user selects a value in first drop down then that value must be disable in second drop down

I'm new to angularjs. I've 2 drop downs with same values in html. Here I want whenever user selects a value in first drop down then that value want to disable in second drop down. var app = ...
Moulali 's user avatar
8 votes
1 answer
2k views

Angular.js ng-option select using keypress

I have a <select> populated via ng-options. In a specific case, when two values are adjacent in the ordered model list and the values have the same first letter, the updating of the model value ...
phonicx's user avatar
  • 479
7 votes
2 answers
8k views

Default text in Angular select

By default angular uses an empty value if nothing has been selected in a <select>. How can I change this to a text that says Please select one?
fanhats's user avatar
  • 797
7 votes
5 answers
2k views

ng-options not binding when it has preselected values

I am using select2 to create a div with tags like functionality when creating a new post. Stack is Angular 1.6.x It works well when I am creating a new post BUT when I add pre-selected values when ...
Sean's user avatar
  • 1,273
7 votes
2 answers
40k views

AngularJS ng-options default selected option [duplicate]

How can you set a default option with ng-options? I've set this in the controller (using the controller as syntax): this.myOption = this.myOptions[0]; However, that's still returning a blank ...
Ryan's user avatar
  • 6,141
7 votes
5 answers
25k views

Customize ng-options selection look

I'm using a ng-options for a select dropdown menu. I would like to use different color for an option depending on a condition: select(ng-model='myCompany', ng-options='company.code as company.name ...
Nate's user avatar
  • 7,746
7 votes
1 answer
3k views

ng-options model not updated when use arrow keyboard instead of mouse

I Created js fiddle: Fiddle I create a form with some ng-options in it, and it have strange behavior when you use the button instead of mouse (just click on the textbox and press "tab" and you can ...
reptildarat's user avatar
  • 1,036
7 votes
3 answers
24k views

Bind ng-options value and label to ng-model

I'm using ng-options to generate a select tag whose options are locations. The labels are the location names, and the values are the location ID (in database). I've bound the value (location ID) to ...
eirikir's user avatar
  • 3,822
7 votes
3 answers
22k views

Angularjs select value is undefined

Now I am trying to get the value from select dropdown, but it return undefined. The thing is in html level it works as expect, Here is my code: <div class='subcontent'> <input ...
linyuanxie's user avatar
7 votes
2 answers
25k views

Why ng-model does not update controller value select?

This is the code HTML: <div ng-controller="SelectCtrl"> <p>selected item is : {{selectedItem}}</p> <p> age of selected item is : {{selectedItem.age}} </p> &...
alvarezsh's user avatar
  • 503

1
2 3 4 5
19