I am trying to get the value of a SelectElement using the getValue() method of that class. However, when I debug and watch what's happening, the value is always null. I am able to confirm that the SelectElement contains the expected HTML node when debugging and that one of the options contained within has the selected attribute.
Here is the code that finds the select element in the DOM and tries reading the value:
SelectElement e = (SelectElement) DOM.getElementById( "sel-" + transaction.getId().toString() ).cast();
Boolean isAcknowledged = Enums.TransactionType.ACKNOWLEDGED.equals( e.getValue() );
As I said above, calling the e.getValue() method does not return a value but when I watch what is contained in e, I see the expected HTML node with one of the options set as selected.
<select class="form-control" id="sel-88024">
<option value="CONSUMED" selected="">Used</option>
<option value="ACKNOWLEDGED">Received</option>
</select>
But there is never a value in getValue(). Any ideas would be appreciated.
I think the problem is not related to GWT. Could it be that Enums.TransactionType is a real Java-Enum and you have to use Enums.TransactionType.ACKNOWLEDGED.name().equals(e.getValue())?
I've a simple select statement, where I want to read the selected value, and send it to a function in the controller upon select change, I was able to read the index and able to display/read it in the select, but the on-change function keep sending 0 to the function:
my select HTML is:
<select ng-change="TodoCtrl.printit(ng-value)">
<option ng-value=""></option>
<option ng-repeat="todo in TodoCtrl.todos" ng-value={{$index}}>
{{$index}} is {{todo.text}}
</option>
</select>
and the function in the controller is:
void printit(num i){
print('id selected is: $i');
}
Can anyone hlp me here pls.
thanks
You probably should use a model rather than trying to handle the change event. Check the unit tests for sample code.
What you see is the result of ng-value being an undefined variable in the context of the event. There is no ng-value variable defined in this snippet at all. The directive ng-value does not define a variable.
The ng-value directive is to be used to assigned an arbitrary value (ie an object) as the option value. In this code options values are plain string and a vanilla value attribute should be used.
Thanks, I noticed the following:
ng-modle is required to be used
value (not ng-value) is required to be used
FUTURE is required to be used, luckily this answer helped me
{{$index}} is a String, not an integer, so it is required to be converted into integer in the function to be able to process it as integer, using int.parse()
so, the working code with me was:
in HTML file:
<select ng-change="TodoCtrl.printit()" ng-model="TodoCtrl.selectedIndex">
<option ng-value=""></option>
<option ng-repeat="todo in TodoCtrl.todos" value={{$index}}>
{{$index}} is {{todo.text}}
</option>
</select>
and the function in the controller was:
void printit(){
new Future(() {
selectedText=todos[int.parse(selectedIndex)].text;
print('id with future selected is: $selectedIndex and the value is $selectedText');
switch(int.parse(selectedIndex)){
case 0:
print('String 0');
break;
case 1:
print('String 1');
break;
default:
print('default');
break;
}
});
}
the above worked perfectly with me, is this the perfect approach, or this is a kind of work around!!
any thought!
I have a multiple select item in a Form. According to Play Framework's documentation, I need 'repeated values' to make all the selected options fit into a List[String] property of my data structure.
case class MyFormData (
fq_cset: Option[List[String]]
)
val myForm: Form[MyFormData] = Form(
mapping(
"fq_cset" -> optional(list(text))
)
)(MyFormData.apply _)(MyFormData.unapply _)
I quote Play's documentation:
When you are using repeated data like this, the form values sent by the browser must be named emails[0], emails[1], emails[2], etc.
I cannot figure out how to name the values like mentioned above. I tried to create a select element like this one
<select name="fq_cset">
<option name="fq_cset[0]" value="A" selected="selected">Value A</option>
<option name="fq_cset[1]" value="B" >Value B</option>
<option name="fq_cset[2]" value="C" selected="selected">Value C</option>
<option name="fq_cset[3]" value="D" >Value D</option>
</select>
but after submitting the form I see in the URL
/path?fq_cset=A&fq_cset=C
instead of
/path?fq_cset[0]=A&fq_cset[2]=C
The absence of the indexes enclosed in square brackets, prevents the correct binding of the parameters in the List[String] property named fq_cset in MyFormData class.
How can I get this to work properly? Is this the right approach to get what I need or I misunderstood the documentation?
Here is my fiddle: http://jsfiddle.net/mwrLc/12/
<div ng-controller="MyCtrl">
<select ng-model="searchCountries" ng-options="cc.country for cc in countriesList | orderBy:'country'">
<option value="">Country...</option>
</select>
<select ng-model="searchCities" ng-options="ci.city for ci in citiesList | filter:searchCountries | orderBy:'city'">
<option value="">City...</option>
</select>
<ul>
<li ng-repeat="item in list | filter:searchCountries | filter:searchCities">
<p>{{item.country}}</p>
<p>{{item.city}}</p>
<p>{{item.pop}}</p>
<br>
</li>
</ul>
The first select filters the second one but also the result list.
The second select filters only the result list.
It works great until a country and a city are chosen. Then, when you choose another country, second select got reseted but the scope seems to be stuck with the old value.
i cant find a way to have it works properly... Please help!
The best solution is to reset the city model when a change to country model is detected via $scope.$watch():
function MyCtrl($scope) {
// ...
$scope.$watch('searchCountry', function() {
$scope.searchCity = null;
});
}
Note that I changed your model names to singular form ("searchCountry" and "searchCity") which is more appropriate considering the value of those models is set to a single country or city.
Here is the full working example: http://jsfiddle.net/evictor/mwrLc/13/
Ezekiel Victors solution is excellent. However, I ran into a bit of a dependency injection issue while trying to get this to work when referencing the controller from an ng-include. Thanks to the help from Ben Tesser I was able to resolve the issue. Ive attached a jsfiddle that details the fix:
http://jsfiddle.net/uxtx/AXvaM/
the main difference is that you need to wrap the searchCountry/searchCity as an object and set the default value to null. Ditto for the watch.
$scope.test = {
searchCountry: null,
searchCity: null
};
/// And your watch statement ///
$scope.$watch('test.searchCountry', function () {
$scope.test.searchCity = null;
});
In your template you'll change all references from searchCountry/searchCity to test.searchCountry.
I hope this saves someone some time. It's trixy.
I have an array of Person objects
var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];
and i am using select with ng-options like this:
<select ng-model="Blah" ng-options="person.Name for person in persons"></select>
I want to show the record with Eligible:false in red color.
So the problem is how do i use the ng-class in select inorder to achieve this? Since we are not using any option tag it wont work if i simply add ng-class in the select element itself.
You could create a directive that processed the options after the ngOptions directive is processed that updated them with the appropriate classes.
Update: The old code had a few bugs, and I've learned a bit since I answered this question. Here is a Plunk that was redone in 1.2.2 (but should work in 1.0.X as well)
Here is updated (Nov 30 '13 at 3:17) the Code:
app.directive('optionsClass', function ($parse) {
return {
require: 'select',
link: function(scope, elem, attrs, ngSelect) {
// get the source for the items array that populates the select.
var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
// use $parse to get a function from the options-class attribute
// that you can use to evaluate later.
getOptionsClass = $parse(attrs.optionsClass);
scope.$watch(optionsSourceStr, function(items) {
// when the options source changes loop through its items.
angular.forEach(items, function(item, index) {
// evaluate against the item to get a mapping object for
// for your classes.
var classes = getOptionsClass(item),
// also get the option you're going to need. This can be found
// by looking for the option with the appropriate index in the
// value attribute.
option = elem.find('option[value=' + index + ']');
// now loop through the key/value pairs in the mapping object
// and apply the classes that evaluated to be truthy.
angular.forEach(classes, function(add, className) {
if(add) {
angular.element(option).addClass(className);
}
});
});
});
}
};
});
Here's how you'd use it in your markup:
<select ng-model="foo" ng-options="x.name for x in items"
options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>
It works like ng-class does, with the exception that it's on a per-item-in-the-collection basis.
In this scenario you can only apply ng-class only if you use ng-repeat with option tags:
<select ng-model="Blah">
<option ng-repeat="person in persons" ng-class="{red: person.Eligible}">
{{person.Name}}
</option>
</select>
This will give custom class to your 'Eligible' persons, but CSS won't work consistently across bowsers.
Plunker.
I wanted to comment on the accepted answer, but because I don't have enough reputation points, I must add an answer.
I know that this is an old question, but comments where recently added to the accepted answer.
For angularjs 1.4.x the proposed directive must be adapted to get it working again.
Because of the breaking change in ngOptions, the value of the option isn't anymore the index, so the line
option = elem.find('option[value=' + index + ']');
won't work anymore.
If you change the code in the plunker to
<select ng-model="foo" ng-options="x.id as x.name for x in items"
options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>
As result the value of the option tag will now be
value="number:x" (x is the id of the item object)
Change the directive to
option = elem.find('option[value=\'number:' + item.id + '\']');
to get it working again.
Of course this isn't a generic solution, because what if you have not an id in your object?
Then you will find value="object:y" in your option tag where y is a number generated by angularjs, but with this y you can't map to your items.
Hopes this helps some people to get their code again working after the update of angularjs to 1.4.x
I tried also to use the track by in ng-options, but didn't get it to work.
Maybe people with more experience in angularjs then me (= my first project in angularjs)?
The directive is one way, but I used a custom filter.
If you know how to select your element, you should be fine here. The challenge was to find the current option element inside the select. I could have used the "contains" selector but the text in the options may not be unique for items. To find the option by value, I injected the scope and the item itself.
<select ng-model="foo" ng-options="item.name|addClass:{eligible:item.eligible,className:'eligible',scope:this,item:item} for item in items"></select>
and in the js:
var app = angular.module('test', []);
app.filter('addClass', function() {
return function(text, opt) {
var i;
$.each(opt.scope.items,function(index,item) {
if (item.id === opt.item.id) {
i = index;
return false;
}
});
var elem = angular.element("select > option[value='" + i + "']");
var classTail = opt.className;
if (opt.eligible) {
elem.addClass('is-' + classTail);
elem.removeClass('not-' + classTail);
} else {
elem.addClass('not-' + classTail);
elem.removeClass('is-' + classTail);
}
return text;
}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ name: 'foo',id: 'x1',eligible: true},
{ name: 'bar',id: 'x2',eligible: false},
{ name: 'test',id: 'x3',eligible: true}
];
});
Here you can see it work.
The accepted answer did not work for me, so I found an alternative without a custom directive using track by :
<select ng-model="foo" ng-options="x.name for x in items track by x.eligible"></select>
Each option now gets the value x.eligible. In CSS you can style options with value = true (I think true has to be a string). CSS:
option[value="true"]{
color: red;
}
In case you not only want to show them in red color but prevent the user from selecting the options, you can use disable when:
<select
ng-model="Blah"
ng-options="person.Name disable when !person.Eligible for person in persons">
</select>
You can then use CSS to set the color of disabled options.
I can't write this as a comment, due to reputation, but I have updated the plunker for the accepted answer to work with Angular 1.4.8. Thanks to Ben Lesh for the original answer, it helped me a lot. The difference seems to be that newer Angular generates options like this:
<option class="is-eligible" label="foo" value="object:1">foo</option>
so the code
option = elem.find('option[value=' + index + ']');
wouldn't be able to find the option. My change parses ngOptions and determines what field of item was used for the label, and finds the option based on that instead of value. See:
http://plnkr.co/edit/MMZfuNZyouaNGulfJn41
I know I am a bit late to the party, but for people who want to solve this with pure CSS, without using a directive you can make a css class like this:
select.blueSelect option[value="false"]{
color:#01aac7;
}
This css rule says : Find all elements with value = false with tag name 'option' inside every 'select' that has a class "blueSelect" and make the text color #01aac7; (a shade of blue)
In your case your HTML will look like this:
<select class="form-control blueSelect" name="persons" id="persons1"
ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
ng-model="$ctrl.selectedPerson" required>
<option disabled selected value="">Default value</option>
</select>
The track by inside the ng-options is what will hold what to track the options by, or the "value" field of each option. Notice that depending on your project needs , you might have to do some tweaking to make this work as per your requirements.
But that's not going to work right when there's multiple options with the same value for the Eligible field. So to make this work, we create a compound expression to track by, that way we can have unique values to track by in each option. In this case we combine both fields Name and Eligible
So now our html will look like this
<select class="form-control blueSelect" name="persons" id="persons2"
ng-options="person as person.name for person in $ctrl.persons track by (person.name + person.Eligible)"
ng-model="$ctrl.selectedPerson" required>
<option disabled selected value="">Default value</option>
</select>
and our css :
select.blueSelect option[value*="False"]{
color:#01aac7;
}
Notice the * next to value, this is a regular expression which means to find the word "False" somewhere in the value field of the option element.
Quick Edit
You can also choose to disable the options with Eligible = False using the "disable when" in the ng-options expression , for example:
label disable when disable for value in array track by trackexpr
I'll leave how to use that in your case for you to find out ;-)
This works for simple css modifications, for more complex stuff you might need a directive or other methods. Tested in chrome.
I hope this helps someone out there. :-)
I've found another workaround that was easier than adding a directive or filter, which is to add a handler for the onfocus event that applies the style.
angular.element('select.styled').focus( function() {
angular.element(this).find('option').addClass('myStyle');
});