angular Protractor e2e tests and select value? - angularjs

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.

Related

Angularjs ng-model - convert string to number

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.

AngularJs - Dependent Select - How to get the picked value

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

Auto Select already saved value on drop down box

<select ng-model="Event.Team" ng-options="a.TeamName for a in Event.Item.TeamNamesList" required="">
<option value="" disabled="" class="">-- Select Your Team --</option>
<option value="0">Team1</option>
<option value="1">Team2</option>
<option value="2">Team3</option></select>
How can I auto select the already saved value on db ?
Here I saved the "Team1" as on DB(string field). This drop down does not have any "value filed" associated with it.Only text fields as Team1,Team2,...
EDIT : On above set-up where I can save the data properly.But the problem I have is when it shows that data again on drop down box.Any help would be much appreciated.
For data like [{"Selected":false,"Text":"Yugoslavia","Value":"244"},{"Selected":false,"Text":"Zambia","Value":"246"},{"Selected":false,"Text":"Zimbabwe","Value":"247"}]
this is what works
<select
ng-model="paymentDetails.BeneficiaryCountry"
ng-options="country.Value as country.Text for country in paymentDetails.BeneficiaryCountryList">
<option value=""></option>
</select>
try this
select ng-model="Event.Team" ng-options="a.TeamName as a.TeamName for a in Event.Item.TeamNamesList" required="">
you can refer below jsfiddle
http://jsfiddle.net/n9rQr/20/
You need to specify which value will be used via the ng-options attribute.
The following should work ng-options="a.TeamName as a.TeamName for a in Event.Item.TeamNamesList".
EDIT:
This way the directive will know which value to select based on the ng-model.
Here is fully working example, the trick is to use track by in select ng-options like so:
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
If selectedCity is defined on angular scope, and it has id property with the same value as any id of any city on the cities list, it'll be auto selected on load.
Here is Plunker for this:
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
See source documentation for more details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

AngularJS select creates option with value "? object:null ?" and doesn't use empty default option when bound to null

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.

Select a dynamic item in a list with AngularJS

I have a <select> element with an ng-model=sendTime element to select a time from the list. This list contains only a limited number of standard times, but as a last item it always contains an option for the sendTime in the model:
<select ng-model="sendTime" style="">
<option value="now">now</option>
<option value="08:00">08:00</option>
<option value="17:00">17:00</option>
<option value="{{sendTime}}">{{sendTime}}</option>
</select>
The last item is just to ensure that a custom time (which is not editable in this view) will appear in the selection box. The problem is that Angular doesn't do this correctly. It adds the final element to the list, but it doesn't select it. It only ever selects one of the default times.
How can I fix this?
Change the last option to <option ng-value="sendTime">{{sendTime}}</option>. The behavior will be abit weird though. When you select an other option the value of the last option will change to the selected option. If you don't want this behavior you could do something like this:
<select ng-model="sendTime" style="" ng-init="default=sendTime">
<option value="now">now</option>
<option value="08:00">08:00</option>
<option value="17:00">17:00</option>
<option ng-value="default">{{default}}</option>
</select>
See: http://plnkr.co/edit/YhEgbDSxkE6nYy0FaRVF?p=preview

Resources