I am trying to use Angular-Formly together with angular ui-select using $http for results.
The options should refresh as the user types in. When I set the model from another text input, the ui-select updates correctly and show the corresponding results based on what was typed into the text box.
When I however type straight into the ui-select box, I am not getting values back and the templateOptions.options function does not fire and the $viewvalue is not updated.
I also don't seem to have access to the $select.search results which are updated but are not available in the expressionProperties.
Please see the following JSBin that reproduces the error :
http://jsbin.com/peducofaje/edit
I would appreciate help on this.
I have an early Christmas present for you. I've updated the ui-select example to have exactly what you want :-) A few notes on why yours didn't work:
expressionProperties only run when the formState or model changes which is an optimization to reduce the number of watchers (because all expressionProperties share a single watcher). The problem with this is, your model didn't get updated until after an option was selected, so yeah.
The template was using a group-By, but the templateOptions didn't have a groupBy. You could use a templateManipulator to dynamically add a group-by if one is present on the templateOptions, but my solution doesn't demonstrate this.
You weren't handling the case where the address search was empty
Also, checkout the note at the top:
// NOTE: This next line is highly recommended. Otherwise Chrome's autocomplete will appear over your options!
formlyConfig.extras.removeChromeAutoComplete = true;
I hope this is helpful!
Related
I am working with a form in Angular, using Angular Material. I need to get the order in which the options were selected in a select.
https://material.angular.io/components/select/overview#multiple-selection
I was testing with selectionChange but I did not find anything concerning the order in which the elements have been selected.
I'm not sure which is the best option but you can send the event to the .ts file and with some JS make up logic to see which was chosen in which order first. #advice
Also it would help if you post some of your code to point you in the right direction.
I've never worked with Ember, and am fairly new to JavaScript, and have for the past couple of days been trying to translate my HTML and JS into the Ember framework (I got some help from a friend). The first feature of the project should simply be able to fill a text-field with longitude/latitude of an inputted address. The second feature of my project is based on a selection from a drop-down menu (drop-down is made of different counties), and fill another text-field with a specific email address depending on which selection was made.
The problem I'm having: I can't seem to figure out how to fire up my setEmail function as I need it to recognize a value (1, 2, 3, 4 etc.) from the selected county from the drop-down, and based on that value; fill in the text-field with the correct email address. I've heard about Ember Observers, but cannot seem to figure out how to implement them for the drop-down I built. I'd really appreciate if someone could take a look at my project and give me pointers on what I could improve, or even do completely differently.
Here is a link to an Ember Twiddle of my project: GeoApp
I appreciate any suggestions and insight! Thank you.
The main idea was right, you were just missing small details. x-select has an "action" hook that you can use which is being triggered every time the value of the x-select changes. This also passed to you as an argument the selected value.
Also there was no need to make the as |xs| part and the options should be set as {{#x-option value='country.value}}country.display{{/x-option}}
Doing all this will make it work. You can find a working twiddle here.
I've never worked with Ember before, and am fairly new to JavaScript, and have for the past couple of days been trying to translate some HTML and JS into the Ember framework (I got some help from a colleague). What I've tried to accomplish is, first; getting Google Geocoder to function and fill some text-feild with latitude/longitude from an inputted address, and second; filling some text-field with a specific email address based on what selection the user made from a drop-down menu. Everything is working quite good, except that when I select an option from the drop-down it sometimes displays another selection (for example, selecting "Oakland" displays "Butte") - guessing it has something to do with "value", just not sure how to address and fix the issue. Does anyone have any idea on a fix, or perhaps another approach to make it display the correct selection, while still sending the correct email-address to the text-field?
Link to an Ember Twiddle: MyProject
Also, separate question - I'm also not sure how my "dataValue"-variable works (routes/demo.js); my colleague helped me out with that part and I'm just a little unsure of my "setEmail"-function knows what dataValue is supposed to be as I can't figure out where the variable is set. If someone could clear that up for me, I'd very much appreciate it.
I appreciate any suggestions and insight! Thank you.
Your problem is that; various options you create share the exact same "value". To explain; whenever you select an option from the select; all the x-option components recalculates their "selected" computed properties in case the value of x-select changes. I have modified your twiddle and just inserted some console logs to x-select and x-option in order to explain you the situation. See the modified twiddle.
Initially select Oakland and open the console and trace it. As you see; x-select first updates the value to 1; and all counties with value equal to 1 (Oakland, Collier, etc.) outputs their text since they are all selected. Since Butte is the last option in list with value 1; its text is displayed in the user interface. Now just select; Brevard and as expected St. Lucie is displayed in the user interface but all options with value 3 are selected including Brevard and Indian River. Now just select Indian River; this time x-select logs again; but x-options do not log; because the x-select's value did not change (it was 3; and it is still 3 since an option with the same value is selected).
So to sum up; in this implementation you need to give unique option values to every single county. Otherwise; the county that has the largest index inside prepopulatedCounties array will be selected among the counties sharing same value. If you continue selecting another county that has the same value as the last selected one; you will think your code is working mistakenly because select will display it correctly; however that is not the case!
If you intent to use select in ember; I would highly recommend you to use ember-power-select instead of reinventing the wheel.
Regarding your second question; it is related with actions. You send an event to router via this.sendAction('action', this.get('value'), this);
inside x-select and you handle this inside demo.js router because you declared setEmail as the event handler inside demo.hbs with {{#x-select value=model.selectedCounty action='setEmail'}} the last part. I highly recommend you to look at Emberjs official guide for action registration and handling. Good luck.
Actually my requirement is to get the Activity Name when ever the WorkcenterName getting change i need to display corresponding activity in dropdown. Activity i will get from gridData(this is variable in my example).
I tried using cascadeFrom , I am not able to get the value. I hope i explained my requirement clearly.
Here with attached Dojo link. Please have a look my code and give the solutions for this.
http://dojo.telerik.com/APeVA
Thanks in advance..
I was able to find a couple of thing wrong with your dojo code and update your dojo here with a working sample. Here is a list of some of the problems I found, the solution was probably a combination more than 1 of these.
There was no cascadeFrom or cascadeFromField defined in your activity drop down.
I normalized your gridData data set, separating the activities into a separate list that I used to fill the activities drop down. I replaced it with an ActivityId in the gridData. Kendo data sources do not support a object or array field types.
Added a name attribute to the workCenterName drop down so it could be found by cascade setting.
Added an id to the gridData, this helped the edit/cancel/delete work properly.
I have done that in a .cshtml. Hope this can help you.
I have defined the columns as follows:
columns.ForeignKey(p => p.Servicio, (System.Collections.IEnumerable)ViewData["SER"], "CodServicio", "DesCorta").Width(75).EditorTemplateName("ServicioTemplate").Title(Recursos.Resource.SERVICIO);
columns.ForeignKey(p => p.Seccion, (System.Collections.IEnumerable)ViewData["SEC"], "CodSeccion", "DesCorta").Width(75).EditorTemplateName("SeccionTemplate").Title(Recursos.Resource.SECCION);
The secret here is .EditorTemplateName(). I have a folder, in a specific location. Not sure if you can change that, but I think it must be in Views/Shared/EditorTemplates and there I have defined both dropdowns, the second one with .CascadeFrom() property just as you would use it outside of a grid.
Hope this can help you, feel free to ask anything you need!
I have an object, that describes an application and one property can have several values from a list. I am using JSRender and JSViews for the databinding, I'm getting pretty good with the rendering part and I still have a lot to learn on JSViews.
I have several dropdowns in my application where the correct value is selected but I don't see how I can databind with several values inside a list box.
I created a JSFiddle to demonstrate the concept but again, I have a problem, my fiddle seems to work only when I am logged in, I gave it a name, I can see it in my public fiddles but, when connected as a Guest, I can see the code but it doesn't seem to run.
Here it is: [http://jsfiddle.net/ClaudeVernier/73pyx/]
If you could help me getting this work where the listbox is in the Red rectangle with IDs 100 and 200 selected, that would help me a lot, next, if anyone could suggest a way to have the same thing but we checboxes next to each item in the list box, it would be perfect !!!!
I think it exists as a JQuery plugin but I am not sure, if anyone has experience of such plugin and making it work with JSViews... it would be a dream... :-)
Thanks for any help,
Claude
In your jsfiddle, you are using render(), not link() so in effect you are using just JsRender, not JsViews, and you won't get JsViews data-binding.
Did you see this sample: http://www.jsviews.com/#samples/tag-controls/multiselect? It shows a multiselect listbox using JsViews.