Develop Reference

polymer select values not set

I've setup a JSbin to show an issue I'm having with a polymer select box not reflecting the model (initially), however, the model does get updated after selecting an option. Note that in my example, I'm ensuring the model is loaded after the select options are populated, however, I guess the tricky thing here is that the select box population is a nested dom-repeat (thus when module is populated, the nested dom-repeat for the 'select' must be re-populated - I'm guessing).
Here's the bin and how to test it to show the dilemma.
http://jsbin.com/xucavi/edit?html,console,output
After page loads, note there are no selections made in the 2 select boxes. Click the 'Display Values from Model' button. Note that the values show the model has values. Select 'Digital' for each of the 2 select boxes. Now click the 'Display Values from Model' button again - and note that model has been updated.
Any thoughts on how to work around this? Thanks

You need to compute the value for the selected attribute of the option elements.
Modify the outer dom-repeat to bind the actual books to the property book instead of item. Now, binding the selected attribute to a _computeSelected(item, book) function makes it possible to dynamically calculate the selected book type:
<option value='{{item.id}}' selected$='[[_computeSelected(item, book)]]'>{{item.type}}</option>
The implementation of the function itself is quite simple:
_computeSelected: function(item, book) {
return item.id === book.typeId;
}
Working example of your JS Bin:
http://jsbin.com/sodugigubo/edit?html,console,output
For a more in depth explanation, read about computed binding and attribute binding.
Warning: Be aware that Polymer dom repeat is not working for Select Option in IE.

AngularJS model does not update after manual change of option

I have a problem with AngularJS model. Currently I have two select tags and I fill it by some async action then I just set select tag model by received data. Everything works well but if I change select tag (option) manually then model can't be changed anymore by this async actions - script keeps model picked by me manually - I am sure that I assign proper data to model from server response, because it works untill I don't change it manually...
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
(second select looks like above).
If someone have some idea why ngModel can't be updated after manual changes, please reply :)

You must be using ng model with direct variables. When using ngmodel with html input types use object types in ng model else value does not reflect.
$scope.req={value:""};
in html use
<select data-ng-model="req.value"></select>

Weird but I fixed it - It was because 'select' was wrapped by div which had ng-controller. Controller contains actually one action with change select option. After remove this ng-change it didn't help but removing whole controller declaration did..
<div ng-controller="sController">
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
</div>
Someone can explain me this anomaly ? ;/ Model always was changed in main/common controller (parent) where also was initially created.
http://jsfiddle.net/nkr33bo0/

Angularjs, select option after getting object from server

The short version of what I'm doing:
I'm getting some JSON from the server to try to recreate the state of my form. Everything loads fine except for one select box that uses a function to get its display. How can I accomplish this?
The longer version:
I have a select box that looks like this:
<select name="size" ng-model="form.options.size" ng-options="form.displaySize(size) for size in form.sizes">
<option disabled value="">-- choose dimensions --</option>
</select>
This works fine with the user selecting the option, but I'm trying to figure out how to get the select box to select the right size when form.options.size is set programmatically (after receiving some json from an api call).
My "size" object looks like this: {width: (some width), length: (some length)}.
My "displaySize" function just returns a string width + "x" + length.
I understand I could manually loop through the options and select the right one, but I'm really trying to avoid that as much as possible. What are my options?
Edit:
Fiddle showing exactly what I'm doing here.

While assigning the value to the select model, the value assigned to the ng-model should have the reference in the json list given to the ng-options.
$scope.form.options.size = $scope.form.sizes[index];
http://jsfiddle.net/ptno0ew7/1/
OR
use track by option for the ng-options directive, updated the fiddle http://jsfiddle.net/fo1h1n53/1

Grails: How to display data from datasource based on selection in GSP form

I have a pulldown menu generated from a MySQL dataSource.
<g:select onchange="selected()" id="name" name="name" from="${listOfNames()}" noSelection="['':'--']"/>
this populates the menu with one column from my table
Now based on the selection I want to display additional columns from the same table as text on the gsp form.
so user selects Name1 from dropdown. I display underneath the dropdown menu
Name1. age 21. degree yes.
I have an action inside my controller called allDetails that queries all values associate with a name and returns it a string. But I am not sure how to pass it parameters
"${remoteFunction(action:'allDetails', params: \'name=\' params.name')}
What is the best way to do this. run a JavaScript remote function inside selected() or a gsp tag that calls the action somehow? how to then display the returned string? Change the innerHTML?
tried http://www.grails.org/AJAX-Driven+SELECTs+in+GSP

You cannot use remoteFunction or other core Grails tags, because its text is fully generated during page rendering, and you only know the selected name during Javascript executing in onchange.
So use jQuery Ajax call (unless you switched to a different Javascript plugin).
And I suggest that you select not a name, but an id of that person, like in a second g:select example.

Html 'Select' control always returnh selected index as 0

I have placed HTML 'Select' control on aspx page and it's items(options) are loaded dynamically using javasvript. The items in dropdown appear properly on web page. But when I select any item from dropdown, it's selected index is not returned in aspx.cs file. In fact, it shows selected index as 0 and size of 'Select' html control as -1.
I have inserted the javascript(which inserts items in dropdown) in body tag. I also tried by calling javascript function on Body onload. But it didn't help.
Please advice.

Because you populated the list via javascript, the values aren't in ViewState. So, when it posts back, the code behind isn't aware of the values that are on the list.
You could use Request.Form["ddWhatever"] to get the value of the selected item, but you lost the server side capabilities when you populated it on the client.

That's a normal behavior.
Why not bind the values from the server side? Use an <asp:DropDownList> instead of <select>, give it an ID, and populate it from your .NET code before returning it to the client (Possibly on Page_Load, and make sure you check for !IsPostBack before binding)