I'm working with Angular 1.6.6 and I have found a bug related to the select component.
I have the following component:
<select ng-model="searchCriterion" ng-change="change()">
<option value="title">Title</option>
<option value="description">Description</option>
<option value="price">Price</option>
<option value="email">Email</option>
</select>
And the change method is showing on the console the value selected. The first time that I select an option it works well, but the second one it return the value selected + 1:
For instance, if I select description, searchCriterion will be price.
The change method is as simple as follows:
$scope.change = function () {
console.log($scope.searchCriterion)
}
If I use the value in other method, for instance a method that is triggered from a ng-click in a button, it happens the same
I have found on the internet some related info, but I don't get with how to fix the error
The code you have provided works properly.
See this plunker to convince yourself: https://embed.plnkr.co/IVg6KXVTPrBP3UhDxkbk/
Your problem shouldn't exist.
Related
I have a use case, where I need to open a new tab on users choice in select.
<select ng-model="selected" ng-click="switchAction(data.id, selected)">
<option disabled hidden selected value=""></option>
<option value="run">1</option>
<option value="edit">2</option>
<option value="deleteEnvironment">3</option>
<option value="addSoftware">4</option>
<option value="openLandingPage">5</option>
</select>
Javascript:
function switchAction(id, selected) {
vm[selected](id);
}
vm.openLandingPage = function (id) {
window.open(vm.landingPage + "?id=" + id);
};
This code works perfectly in Chrome and Firefox, but doesn't in Safari. It could be partially solved, if I replace ng-click to ng-change. But then browser blocks a pop-up. Since, I render this code inside a grid cell, bootstrap's dropdown doesn't work either. I tried to put ng-click directly in option element, but it works only in firefox.
Is there any way to fix it?
Following plunker proofs that safari doesn't send a mouse-click event.
https://plnkr.co/edit/g3W2JLKxZFkzp1dGgrg4?p=preview
Found a solution. With angular-ui/bootstap and dropdown-append-to-body option I was able to break throw the ag-grid border. Issue is finally fixed!
I have a select element defined as
<select v-model="mySelectValue">
<option v-for=...>...</option>
</select>
If used as is, mySelectValue is updated correctly when the user changes the select input.
Now I want to style the input. I tried Selectize.js:
$('select').selectize();
The select input is now using the new look and functionality but changing the value doesn't update mySelectValue. I thought that the original select input would get updated with Selectize.js so I tried Dropdown.js. Same thing.
Using jQuery I hooked a on change listener to the original select input:
$('#mySelect').change(function() {
console.log($(this).val());
});
Using either of those two libraries I see the change event triggered and the original select input updated.
Why isn't Vue updating mySelectValue?
You should add a value attribute to <option>
<select v-model="mySelectValue">
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
</select>
I am using following script but the problem is script
is not working properly.Some time work and some time show wrong text.Instead of selected text.it Show me full text like this.
SELECT MINOR علوم الحاسب الآلي هندسة الطيران والفضاء والتكنولوجيا
<select class="cslMinor_Title" id="slMinor_Title">
<option value="-1">Select Minor</option>
<option value="201">علوم الحاسب الآلي</option>
<option value="203">نظم المعلومات</option>
<option value="299">تكنولوجيا المعلومات الأخرى</option>
</select>
$('#slMinor_Title').on('change', function ()
{
alert($('.cslMinor_Title').find('option:selected').text());
});
This is happen when i submit FORM through update panel and i am using this option in dialog box.
I want selected text not like below
SELECT MINOR علوم الحاسب الآلي هندسة الطيران والفضاء والتكنولوجيا
and also i tried many options like below
jQuery("#slMinor_Title option:selected").text()
But all are giving same result.Guide me what is the problem with code.
See this
$('#dropDownId :selected').text();
Try val() function to get value.
jQuery("#slMinor_Title option:selected").val();
Mark it as answer if you think it is helpful for you.
Ok, I'm sure this one is super simple, though it's evading me.
I have a very simple dropdown select menu - as shown below - with predefined options.
I am setting the $scope.qty in my controller and it correctly selects the appropriate <option>
However, in my controller, on a save() function, when I get the value of $scope.qty i get the original value, that i set earlier, and not the newly selected on.
What I am missing to bind my selected option to the model?
<select ng-model="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
In my controller, I set the qty
$scope.qty = 4;
When I change my select, to say 2, $scope.qty still equals 4.
You can simply create the array in ng-options:
<select ng-options="nr for nr in [1,2,3,4]" ng-model="qty"></select>
Although the way you did it should usually work too. ng-options is not required for ng-model to work. It's the other way around.
AngularJS 1.3 only allows for a single option element that can be used for the null value (aka, not selected).
You need to use the ngOptions convention.
Here's the documentation that explains this:
https://docs.angularjs.org/api/ng/directive/select
Is it possible to disable an option after creating a msDropdown plugin?
I explain my problem better.
I want to put html into each option with icons, text and some other stuff, so first i create an empty select then I add each option with the add function:
dropdown.add({text:$price.html(), value:'normal', className:'normal'});
The problem is that if a certain condition happen I have to disable one option, but there are no way to set an option disabled by using plugin settings.
There is the possibility to make an option disabled only by setting the related parameter disabled=disabled into the select before to call the msDropdown function, but I can't use this solution since I have to put dinamically html into option text.
Is there another way to do it?
Thank you for your help.
I found a solution.
I create my select empty and I fill each option with add function as before, but when that condition happen just do this:
var dropdown = $('select[name="priceType"]').msDropdown().data("dd");
if(credits_error) { // option must be disabled
dropdown.destroy(); // Make it a simple select
$('select[name="priceType"] option').attr('disabled', 'disabled');
dropdown = $('select[name="priceType"]').msDropdown().data("dd");
}
This way first I make it a simple select by calling destroy function, then I set properly the disabled attribute and I create a new msDropdown select.
It works for me, I tested it on IE, FF and Chrome
Yes, it is possibile. It can be done by using the disabled property of the option tag:
<select id="payments" name="payments" style="width:250px;">
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
<option value="amex" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
<option value="Visa" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>
The option 'cash' will be disabled.
Here is a working fiddle: http://jsfiddle.net/NKQRj/1/
EDIT
In this second example data are loaded from JSON data using:
$("#payments").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
to fill the elements.
You can define your options as disabled in your JSON data using disabled: true property:
{image:'http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
here is a working fiddle: http://jsfiddle.net/NKQRj/3/