code
ComboBox combo = new ComboBox('comboBox');
combo.addItem("A");
combo.addItem("B");
combo.addItem("C");
combo.addValueChangeListener(new ValueChangeListener() {
#Override
public void valueChange(ValueChangeEvent event) {
com.vaadin.data.Property changedProeprty = event.getProperty();
String value = changedProeprty.toString() ;
}
});
value is 'C'
However I want to input the other value, like selectBox's option in html
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
How to input the option value and how to get the option value in vaadin combobox ?
You have to set the "real" value as the items in your ComboBox.
You can then use the setItemCaption(...) method to tell the system what do display in the UI.
// Set item caption for this item explicitly
select.addItem(2);
select.setItemCaption(2, "Demos");
Look in the book of vaadin for more details here
Related
I have a dropdownlist -
<select ng-model="contact.type" id="select_{{$index}}" ng-change="changedValue()" class="searchCriteria">
<option>Policy Number</option>
<option>Insured Name</option>
</select>
I want to get the selected item using angularjs. So far I have tried
$scope.changedValue = function () {
alert($(".searchCriteria option:selected").html());
}
among other things. But each time the alert shows "undefined". How do I get the selected option text?
You can just use the $scope variable,
$scope.changedValue = function () {
alert($scope.contact.type);
}
I am displaying dynamic dropdown, where I want to keep one specific element or first element selected. But I could not find way.
<select onChange = {this.handleSelectChange}>
<option>any-select</option>
{
this.state.data2.map(function(data) {
return <option value={data.id}>{data.name}</option>
})
}
</select>
you can use below mentioned code
this.state.data2.map(function(data,index) {
return index==0?<option value={data.id} selected="selected">{data.name}</option>:<option value={data.id}>{data.name}</option>
})
Although you can add selected="selected" on option, but I think the better way is using value of select.
You can change the value of select in onChange handler.
If you want select the first no-value option, just set value to a false value such as null
<select onChange = {this.handleSelectChange} value={/*null or selected option's data.id*/}>
<option>any-select</option>
{
this.state.data2.map(function(data) {
return <option value={data.id}>{data.name}</option>
})
}
</select>
If you want to select any other option, just set value to the option's value
How can I get the object associated to the selected option inside within a dropdown (select)?
Here's my html:
<select ng-model="selSeason" ng-options="season as season.name for season in seasons"></select>
Every season is an object with several properties and I'd need to get the object associated to the selected object (and not only its text or value).
I know ng-repeat has something like (to select name of the 5th season):
element(by.repeater('season in seasons').row(4).column('name'));
Is there something similar for by.options() selector?
Thanks
You can use by.options with evaluate():
var seasonNames = element.all(by.options('season in seasons')).evaluate("season.name");
seasonNames.then(function (values) {
console.log(values); // array of season names is printed
});
You can also filter out the selected option with filter():
var selectedSeasonName = element.all(by.options('season in seasons')).filter(function (option) {
return option.getAttribute("selected").then(function (selected) {
return selected;
});
}).first().evaluate("season.name");
selectedSeasonName.then(function (value) {
console.log(value); // selected season name is printed
});
What you are looking for is the custom by.selectedOption locator.
element(by.selectedOption('model_name'))
For a better description, read this: https://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
I ended up evaluating not the selected option but the ng-model associated to the select:
HTML
<select ng-model="selSeason" ng-options="season as season.name for season in seasons"></select>
JS
element(by.model('selSeason')).evaluate('selSeason').then(function(season){
console.log(season.name);
});
Your binding looks good, you can read all the properties easily by using your ng-model variable 'selSeason', see this example
<select ng-model="user"
ng-options="x as x.name for x in users track by x.id"
class="form-control"
ng-required="true">
<option value="">-- Choose User --</option>
</select>
var id = $scope.user.id;
var name = $scope.user.name;
var role = $scope.user.role
For more detail check this
I'm able to bind all the values to option tag using Angular JS. But, my issue is that, on load the null value is getting appended. And when I set a value in JS code, it sets only the first value, but it won't get changed as selected attribute when I check in browser console. And how can I have my own value to the option tag.
JS
This sets only first value at all time as "selected" attribute
statePromise.success(function(data, status, headers, config) {
for(index in data) {
console.log("ID:"+data[index].id+" Name:"+data[index].name);
if (data[index].id) {
$scope.states.push({
id:data[index].id,
name:data[index].name
});
}
}
$scope.statelist = $scope.states;
$scope.state = $scope.statelist[0];
But, when I change the option value and check in browser, it still shows first. Its because of the above statement. And how can I set option values which I get from DB as
<option value="1">AP</option>
<option value="2">TN</option>
<option value="3">KN</option>
Actually its saving as
<option value="0">AP</option>
<option value="1">TN</option>
<option value="2">KN</option>
HTML Code
<select ng-model="state" ng-change="changeState()" ng-options="state.name for state in statelist"></select>
Any ideas would be greatly appreciated.
Try changing your ng-options as
ng-options="state.id as state.name for state in statelist"
In your controller do this:
$scope.state = $scope.statelist[0].id;
Working with angular, select2 widget.
I am declaring it in HTML something like this:
<div>
<select id = "dropdown"
...
<option value = "1" id="1">1</option>
<option value = "2" id="2" >2</option>
<option value = "3" id="3"" >3</option>
/select>
</div
and want to programatically change the selected item (called from another function).
When invoking the code:
$("#dropdown").select2().select2('val', "3")
I can see that the value at the dropdown changes, but when actually accessing the model attribute of the drop down (to fetch the selected item), it is not set to what I tried to set it to.
When checking the onChange event of the dropdown, I can see the e.val is undefined.
See the next fiddle as an example (after click the link, I wasn't suppose to get "undefined" in the alert box): http://jsfiddle.net/kcArV/1/
Any ideas what I am doing wrong ?
It should be
$('#attribute').select2().on('change', function(e) {
alert($(this).val());
});
e is the event object, not the select control, the method context this points to the select element, so you can call the .val() to get the selected value
Demo: Fiddle