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.
Related
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>
plnkr.co/edit/66oHtYqc66BBZQWua5el?p=preview
you can see in the link that its aint working and mark icon is not
showing too
I think you are trying to create a bootstrap multiple select box.
If so, the reason you may be running into issues is because the current class you are using (selectPicker) would be incorrect. Your code should look like this:
<select multiple id="selectpicker" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
So instead of using the class to target with jQuery, as I believe you are trying to do, use the id value instead. $('#selectpicker')
UPDATE:
I tried using the files you were linking to, but couldn't get them to work (not sure what the issue there was). So instead, I used the cdn links and it seems to be working great now.
Here's a link to the working version: http://plnkr.co/edit/IIvTMLACZHXvhsbRXrkD?p=preview
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.
I am using bootstra-multiselect along with angularjs in my project. During testing what i found is, the "selected" attribute name is getting conflict between these two. Following is my HTML markup for my multi select directive.
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}" data-ng-attr-selected="{{isOptionSelected(option)}}" data-ng-bind-template="{{option.name}}"></option>
</select>
What i found is, data-ng-attr-selected="{{isOptionSelected(option)}}" is not getting compiled by angularjs. Seems like angular js "ng-selected" directive is getting applied instead of my required normal attribute.
How can solve this? I don't want to change the code or either bootstra-multiselect or angularjs to avoid future maintability. Is there something in Angularjs to stop running its predefined "ng-selected" directive?
Following is plunker code to demo this problem
Angularjs and conflict of directive name with other module
You could use ng-selected="expression" which will add selected attribute with selected value in the current select option, I don't understand why you are doing it using ng-attr while you can control that using ng-selected="isOptionSelected(option)"
Markup
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}"
ng-selected="isOptionSelected(option)"
data-ng-bind-template="{{option.name}}"></option>
</select>
Working Plunkr
Let me know if you want anything else on it, Thanks :)
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-options
Examplehttp://plnkr.co/edit/wRqSCNskLo5c48jy4nQf
I am using AngularJS 1.2.9
Thank you in advance.
In your example changing the data bound select to the following fixes the required directive. I'm not sure why exactly.
<select ng-model="selectedValue1" ng-options="opt for opt in ['Mazda2','Maxda3']" required>
<option></option>
</select>
You can also try ng-required="true" (it works on the latest AngularJS, not sure for 1.2.x).
<select ng-model="selectedValue1" ng-options="opt for opt in ['','Mazda2','Maxda3']" ng-required="true"></select>