I see a blank drop down, which I suspect is due to an additional option that gets injected. If I am able to remove this additional option generated, I think, my problem will be solved.
Auto-injected Option:
<option value="? number:1 ?" selected="selected"></option>
My View:
<select id="myValue"
ng-model="myObject.value"
ng-change="foo()">
<option value="0"
localize="MyValue0"
ng-selected="myObject.value === 0"></option>
<option value="1"
localize="MyValue1"
ng-selected="myObject.value === 1"></option>
</select>
How can I conver myObject.value to number? I have tried ng-Model = "parseInt(myObject.value)" and ng-model = "myObject.value | number". Both throw a nonassignable element error. I am using Angularjs 1.6 and moving away from directives, so creating angular.directive function may not be an option
I believe it's Angular best practice to use the ngOptions directive, documented here.
Also, regarding the first option being <option value="? number:1 ?" selected="selected"></option>, I suspect that's because the initial value of myObject.value doesn't match any of the possible options values.
Try this:
<select id="myValue" ng-model="myObject.value" ng-change="foo()"
ng-options="item for item in options">
<option value="" disabled selected style="display:none;">Placeholder</option>
</select>
JSFiddle here showing that myObject.value is a number.
Updated JSFiddle to showcase the dropdown without a placeholder.
Related
so I have two dependent select, one for states and the other for cities. It works fine but I can't get the value picked in the first select. I tried everything, the only result I got was the list of all the cities. What I need is which state picked.
My code:
<label>States</label>
<select id="provincia" class="form-control" ng-model="ciudades" ng-options="provincia for (provincia, ciudades) in provincias">
<option value=''>Elegir</option>
</select>
<label>Cities</label>
<select id="ciudad" class="form-control" ng-disabled="!ciudades" ng-model="modelciudad" ng-options="ciudad for ciudad in ciudades" required>
<option value=''>Elegir</option>
</select>
My list is something like this:
$scope.provincias = {Florida:['Miami', 'Orlando']}
I try using ng-model on Option tag but with no result.
Thanks
I have started leaning AngularJS.
In AngularJS if we have to initialize an element lets take an example of select:
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'">
<option value="a.mp4">First video</option>
<option value="b.mp4">Second video</option>
</select>
why initialization of vsrc='a.mp4' in ng-init is required, when I was giving its value like ng-init='a.mp4' it was not working I had to give like ng-init="vsrc='a.mp4'". In normal HTML statement we are directly giving default option by providing value='a.mp4'
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'"> /*ng-init used to initialize a **variable** before html render, it is a directive which search left and right value always*/
<option value="a.mp4">First video</option> /*value is here as json object {"value":"a.mp4"}*/
<option value="b.mp4">Second video</option>
</select>
take a look over here about ng-init directive
Here's what the code looks like
<select ng-model="nullableInt">
<option></option>
<option value="0">First option</option>
<option value="1">First option</option>
<option value="2">First option</option>
</select>
When nullableInt is null the generated html is
<select ng-model="nullableInt">
<option></option>
<option value="? object:null ?"></option>
<option value="0">First option</option>
<option value="1">First option</option>
<option value="2">First option</option>
</select>
Reproduced in the plunkr here: http://plnkr.co/edit/05pBEMJppmkrn3nFgYdk?p=info
It's worth mentioning that I'm trying to avoid using ng-options, it seems like a bit of overkill to create an endpoint for AngularJS to consume some data that really will not change very often, if ever.
Update 3/29/2017:
As Jorge Rodrigues dos Santos stated, this should be handled in a different way for newer versions of angular. Below is taken from the current documentation for angular 1.6.3
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option. See
example below for demonstration.
https://docs.angularjs.org/api/ng/directive/select
Angular is creating a new option to represent the null value. It didn't find one of the options you provided in the HTML.
To bind to null, set the value="null" on the first option
<option value="null"></option>
http://plnkr.co/edit/kzPVu4hiMcP6wA6crGYt?p=preview
The accepted answer didn't work for me because my property could be blank, null, or undefined. If you are using version 1.3+ then you can use a getterSetter to coerce the value to blank.
I was dealing with string values. You'll have to handle 0 or other valid falsy values in the function as well.
$scope.nullableIntCoerced = function(n) {
return arguments.length ? ($scope.nullableInt = n) : ($scope.nullableInt || "");
}
<select ng-model="nullableIntCoerced" ng-model-options="{getterSetter:true}">
<option value=""></option>
...
https://code.angularjs.org/1.3.20/docs/api/ng/directive/ngModel
For more recent versions of Angularjs use <option value=""> - </option> for the null value
Below solution solved the problem for me.
The problem here is when ng-model is used, it adds a default option with value "?" and without using ng-model, one can not use ng-change to get the current selection. I have actually created an onChangeSelection() within which we can set the defaultSelected property of the like below
$scope.onChangeSelection = function(id) {
document.getElementById(id)[0].defaultSelected = true;
$scope.selected = $('#'+id).val();
}
<select id="mySelect" ng-model="nullableInt" ng-options="option.value as option.text for option in arrayContents track by option.value" ng-change="{{onChangeSelection(id)}}" required>
<option value="" ng-if="false"></option>
</select>
This would exclude the default option from the options list and also make the first value as defaultSelected.
I'm having problems to get currently selected value of the select element. In some cases I can use:
element(by.css('#some-select')).$('[selected]').getText();
And it works just fine. But as I figured out it works only because selected attribute is present on option element. If I select option with javascript by setting select's value this way it's not possible to get element by selected attribute.
What is the proper way to get selected option or it's text because I can't find answer anywhere.
Thank you.
Ok, so right now I feel stupid and a little enraged at the same time.
It turns out that there is a simple way to get the option that is selected by simply calling:
element(by.selectedOption('model-name'));
Documentation here
I feel like this is a wrong way to do because instead of reusing element locator cache that I have defined (select element) I need to use new locator "selectedOption". It feels bad because naturally I would like to simply call something like element(by.css('#some-select')).getSelected();
But maybe there is a way that I could not just find?
So I just ran into this, and I couldn't find any answer that I really liked..
My Answer
First, I recommend changing the ng-options by adding track by statement.
for example:
<select ng-options="l.id as ('filters.languages.' + l.id | translate) for l in limitedLanguages track by l.id" ng-model="filterLanguage">
</select>
This will add the id on the option element so instead of getting
<select ng-options="l.id as ('filters.languages.' + l.id | translate) for l in languages" ng-model="filterLanguage" class="ng-pristine ng-valid ng-touched">
<option value="0">All</option>
<option value="1" selected="selected">English</option>
<option value="2">Hebrew</option>
<option value="3">Russian</option>
<option value="4">Arabic</option>
<option value="5">Other</option>
</select>
you get
<select ng-options="l.id as ('filters.languages.' + l.id | translate) for l in languages track by l.id" ng-model="filterLanguage" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="all" selected="selected">All</option>
<option value="english">English</option>
<option value="hebrew">Hebrew</option>
<option value="russian">Russian</option>
<option value="arabic">Arabic</option>
<option value="other">Other</option>
</select>
note that without the track by the value is simply the index (0,1,..) and with the track by the value is more readable/meaningful (all,english,...)
then you can use getAttribute on value to get the value as mentioned in other answers.
I've bound newParty.party_type.code model to dropdown. On changing its value from controller it is adding another option with value ? number:2138 ? even if option with value 2138 is already contained in select element.
<select id="partyType" name="partyType" class="ng-valid valid ng-dirty" ng-model="newParty.party_type.code">
<option value="? number:2138 ?"></option>
<option value="2138">value 1</option>
<option value="1689">value 2</option>
</select>
I also tried converting newParty.party_type.code to string in controller. But it still adds new option with value ? string:2138 ?
<select id="partyType" name="partyType" class="ng-valid valid ng-dirty" ng-model="newParty.party_type.code">
<option value="? string:2138 ?"></option>
<option value="2138">value 1</option>
<option value="1689">value 2</option>
</select>
If I select any option manually, model gets correct value. But via controller, it's not working.
Why is this happening? How does angular data bindings work? Do I need to be type-aware when dealing with model properties?
EDIT1: Options in select tag are loaded dynamically after page load. (after ng app init) I tried putting some static data and it is working fine. It has something to do with angular not being able to process dynamically loaded data outside angular controllers.