We are attempting to resolve a maddening bug in IE 10 in which the option label of the selected option does not get rendered for an Angular <select>. Instead, the label of the option appears as {{option}}, implying that the directive could not be resolved. What is worse is that this problem does not happen in IE 11 or later, or Chrome. Here is the relevant code:
The HTML:
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" value="{{option}}">{{option}}</option>
</select>
In the controller JS code we define frequency as a static array, since the choices will never change:
$scope.frequency = ["Never","Daily","Weekly","Monthly"];
The scoped variable used for the model is configurations.LOCATION_UPDATE_FREQUENCY, and is defined using a value from the database. Persisting to the database works on IE 10 and other browsers, which means that binding from the UI to the server appears to be working without issue.
What is really strange about this bug is that the correct option still gets selected in IE 10, but the label is broken or not being rendered properly.
Here is a screen capture to further illustrate the problem:
According to offical documentation you should use "ng-value"
https://docs.angularjs.org/api/ng/directive/ngValue
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" ng-value="{{option}}">{{option}} </option>
</select>
Related
I have two select boxes, when clicking an item in one I send it to the second box. This works fine on chrome but IE 11 does not register the ng-click as expected. One similar question I read mentioned pointer-events but when I changed it to auto as bootstrap has it as none I did not see a change.
<select id="availableStuff">
<option ng-repeat="a in aList"
ng-click="move1(a)">
{{a}}
</option>
</select>
</div>
<div>
<select id="selectedStuff">
<option ng-repeat="b in bList" ng-click="move2(b)">
{{b}}
</option>
</select>
</div>
plunker
Using angularjs 1.5.x and bootstrap 3.3.7
This is a known compatible issue, use ng-options for cross-browser behaviors
<select size='8'
ng-model="selectedOption"
ng-options="a as a for a in aList"
ng-change="move1(selectedOption)">
</select>
I would not use a select in this case. A lot of users dont expert this behavior with a select. Instead I would add to styled list beside each other. Using ex bootstraps list groups. Then you could use fontawesome arrow icons to bind the move click event. There is no compability problems there. And it would be intuitive for the end user
Ever since I upgraded from AngularJS 1.3.15 to 1.4.8 I'm getting an empty option added to all my select2 uses.
I've tried what is suggested here: Why does AngularJS include an empty option in select?
and in other questions, but couldn't make it work for me.
Here is a plunkr of my issue: http://plnkr.co/edit/zrYCDbtSVHNt3tRZsQza?p=preview
As you can see, an empty option is added, after selecting any of the 2 values there, the empty option disappears.
The relevant HTML:
<select ui-select2 ng-model="cqData.dataObjects.Mode.Value">
<option value="structured" localize>Structured Query</option>
<option value="advanced" localize>Advanced Query</option>
</select>
P.S. I know ui-select2 is deprecated, but its an existing project and I'm unable at the moment to upgrade it.
Try to set default value in controller like this:
$scope.cqData.dataObjects.Mode.Value = $scope.cqData.dataObjects.Mode[0].Value;
Its working fine.
Not sure if there's a workaround for this, I'm doing something wrong, or this is a collision between simple form or angular, but:
.field
= f.input :role, collection: roles.map(&:name), selected: user.role.try(:name), include_blank: 'Select', required: true, input_html: { "ng-model" => "role" }
renders (which looks correct):
<select ng-model="role" class="select required" name="user[role]" id="user_role">
<option value="">Select</option>
<option value="system">system</option>
<option selected="selected" value="fcm">fcm</option>
<option value="regulatory">regulatory</option>
<option value="operations">operations</option>
<option value="help_desk">help_desk</option>
</select>
But the selected value is the include_blank value of 'Select'. And yes, role is set on the user.
The reason it's doing this is because of the way angular models work and it requires an understanding of this. Essentially the ruby generates the select correctly choosing the selected option of the select box too.
However, once the angular is loaded and sees ng-model on this select it sets the current selected option to the value of the model, in your case, role.
Thus if you want to have an angular model for this select, you need to set the initial value of that model.
Try the following:
.field
= f.input :role, collection: roles.map(&:name), include_blank: 'Select', required: true, input_html: { "ng-model" => "role", "ng-init" => "role = #{user.role.try(:name)}" }
Note that the selected option has been removed entirely since this will be controlled by the Angular model, which is initialized to that value using ruby string interpolation.
I thought for a moment on this particular example and I am not quite sure what you expected to happen with the result.
Although, I assumed that you want to have option with attribute selected="selected" selected as a default value, instead of value="", which is only a blank field. If that I understood correctly and this is the point, that means there are several fields, which might be incorrect and We (the community) do not know how you completed them, but I think I dug up for the problem... ;)
Angular directive - At first, I do not know which version of angular you used in the example (I assume 1.X, because question have 6 months from this moment). The AngularJS select directive overrides the default behavior of select element and change it a bit.
I prepared a simple example with Angular v1.0.1 for the tests and it looks behave correctly in few aspects. If you use ng-model="role" and set the role to fcm (String), like $scope.role = 'fcm', the angular is obligate to set this value if it will find it.
I have also tested (AngularJS v1.0.1) what if the role is not set (undefined), then angular also point on empty string value like value="" and it not see into attribute selected and not set it as default. In the other side, the latest stable AngularJS v1.5.6 does support selected attribute example with AngularJS v1.5.6, so it might be the core of the problem.
Well, the solution for this is simple:
upgrade AngularJS for the latest 1.X version or
consider to use
ngSelected
or ngInit/SO
solution instead if the version AngularJS you used support that.
I have the following code:
<select ng-model="sortYear">
<option value="all">All Years</option>
<option ng-repeat="article in news | orderObjectBy:'year':true | unique: 'year'" value="{{article.year}}">{{article.year}}</option>
</select>
Which works perfectly. I've even got sortYear bound at a different point on the page, and it's connected fine, etc.
My problem is, when I get to the page, I want the default, prechosen selection to be the top actual year, not "All Years". I've tried a couple things:
1) I set $scope.sortYear in my controller. I know it's setting it since the bound sortYear later in the page is showing up just fine on the initial load.
2) I tried using ng-init to set it to a year explicitly, as well as tried the ng-init="sortYear = getCurYear()" where I defined a function getCurYear in the controller (and verified that I was actually hitting that function and setting/returning what I thought I should be) but nada.
What am I missing?
use ng-value in option tag with ng-repeat like
<option ng-value="article.year" ng-repeat="article in news | orderObjectBy:'year':true | unique: 'year'">{{article.year}}</option>
I would like to check, previously I was using angularjs 1.3.15 and everything works fine. I have a country dropdown selection which in html looks like this
<select class="form-control ctm-form" ng-model="uProfile.country">
<option value=null>----- Please Select -----</option>
<option ng-repeat="country in countries" value="<%country.country_id%>"><%country.name%></option>
</select>
and when I load the page the selected value can be displayed properly. Recently I have upgraded to Angular 1.4.4 and i started to notice this selective dropdown box do not display the selected values but instead when I inspect the code it returns me with value like ? number:132 ? as seen in the image below
When i was using Angular 1.3.15 the ng-model will just return the value 132 but why is it when i upgraded to 1.4.4 the result became ? number:132 ? ? What have I done wrong?
I can't leave a comment...
But this is a duplicated question. Here is the Same question.