Admittedly, I know just enough about Angular to be dangerous. However, I'm fairly certain I've followed the instructions for the plugin concisely.
The issue is: whenever I select any of the options from one of my select fields using the chosen plugin (City, Nationality, Hotel, Room Type...) the result never gets populated, and the results from all the other select fields disappear. I'm fairly certain this is user error on my part - any clarification or help is much appreciated.
You can see an example here: http://casamarelanoivas.com.br/sst/test/
Thanks.
Kyle
You are binding the selected value in your list to the same model variable you are using to generate the dropdown list. So whenever you select a value from the drop down list, you are wiping out the list values.
Here is what you have:
<select ng-model="model.cities" ng-options="city.name for city in model.cities">
This is the pattern you want to use instead.
<select ng-model="selectedCity" ng-options="city.name for city in model.cities">
In your controller you can then get the selected value from $scope.selectedCity
Related
I am using ColdFusion 2016. I have a form with a multi-select drop down. The name attribute of the field is called jobRoleId. When I submit this form the field name is available in the form scope as jobRoleId[]. How do I get the value of this field? The name comes across like an array but I can't seem to just dump out the value due to the brackets.
I've tried dumping out the value, but I get an error. I feel like I have done this in the past and the form field name didn't contain the brackets [] after the field name when using a multi select menu:
<select id="jobRoleId" name="jobRoleId" multiple="multiple">...</select>
Is there a way to somehow have the form field name just come across as jobRoleId?
writedump(jobRoleId[]);
abort;
When I execute your code I get a comma separated list for the values of jobRoleId. Are you using any CF frameworks?
My output:
I also suggest looking at the client side JavaScript to confirm there's nothing changing the submitted name. You can use the Chrome/Firefox/IE debugger to watch your submissions and confirm what is being submitted
Multi select lists, in CF, should return a list of values, as far as I remember...
This code works
<select ng-model="connectionsDropDown" ng-options="campaign as campaign.title
for campaign in campaigns" ng-change="OnConnectionCampaignChanged(connectionsDropDown)">
</select>
The newly selected value is passed to OnConnectionCampaignChanged.
However, there is a blank entry at the start of the drop down list.
Some googling told me that I could remove it by adding
track by connectionsDropDown
However, when I try
<select ng-model="connectionsDropDown" ng-options="campaign as campaign.title
for campaign in campaigns" ng-change="OnConnectionCampaignChanged(connectionsDropDown)
track by connectionsDropDown">
</select>
OnConnectionCampaignChanged receives the current value, not the newly selected one.
How do I reconcile the two?
I want:
- a drop down list with no blank entry
- to be able to preset the selected value when switching to that view
- to pass the selected value to OnConnectionCampaignChanged when he use chooses another entry
I don't know where you got that track by trick, but it does look like a nasty workaround rather than the proper solution.
To understand why a blank option is present, you have to put yourself in the shoes of angular. Let's say your select is
<select ng-model="selectedFruit" ng-options="fruit for fruit in fruits">
That means: display all the fruits as options in the select box, and select the one which is === to selectedFruit.
Now what happens if selectedFruit is null, undefined, or just not any of the fruits? What should Angular select as option? It can't select any of the fruits, so it adds a blank option and selects that one.
Corollary: if you don't want a blank option, you have to make sure that the selected fruit is always one of the displayed fruits.
In your case, make sure that $scope.connectionsDropDown is referencing one of the objects in $scope.campaigns.
I have to allow users to select a person from a list. The problem is that I need to show some extra information (gender, age, occupation) for each person in the list, but when selected I should show only the first and last name. For technical reasons I must use select box, not bootstrap drop-down. I have been looking for a solution for hours, but so far could not come up with anything. Is it even possible, anyone knows?
Use ng-options, and delegate to a function to generate the representation of the person:
<select ng-options="p as toOption(p) for p in persons" ng-model="selectedPerson">
</select>
In the toOption() function, test if p (the person passed as argument) is the selected one (i.e. is selectedPerson), and return the appropriate representation accordingly.
Here's a demo plunkr.
I just wanted to see if anyone has had experience with the issue I having. I am currently populating a select element from a restful web service using the ng-options feature and assigning it to my model with ng-model. I have also applied a filter to this select that changes the list based on the value from another select element. Everything works as intended from the display side. If I change the master select element and it filters the second select to not include the currently selected item, the display shows correctly and displays 'please select'. So this looks great and works as I intended but when this scenario happens the underlying model isn't updated and still has the invalid option stored in it. If I pass the model back to the server for further processing, I am getting values that might not be valid.
Does anyone have any ideas on how to have selected that filter one another also update the underlying model ?
I appreciate any ideas.
I'm having trouble using ng-options with filters.
The problem is that when an option is removed by a filter, the model of the select element retains the value of the removed option.
Here is a plunker. I have two filters working on the ng-options set. One that removes duplicates from the list of options, and one that removes nulls. You can see the problem I am speaking of by following these steps.
In the "Preferred Email" dropdown, select the last email option, 'jimbob#yahoob.com'.
Delete the text in the "Other Email" input box.
You can see now that because "Other Email" is null, it is no longer an available option, and the dropdown has defaulted to "Please Select Preferred Email". However the model of the select element still has that object assigned to it.
Same problem different context.
In the "Preferred Email" dropdown, select the option 'jimbob#yahooz.com'.
Now delete the 'z' in "jimbob#yahooz.com"
Upon doing so, the values in the two input boxes ('Email' and 'Home Email') become duplicates, and the second one ('Home Email') becomes filtered out of the available options. However the object that was just filtered remains assigned to the model.
Edit: My solution (Can anyone do better?)
Here (plunker) is the best I could come up with. I'm new to angular and can't help but think there is a better way to do this, I think this solution is "bad" but it works.
Essentially I pass into the filters a reference to the scope (this.contact) along with the name of which default item I am working with ('default_email' or 'default_phone'). If the filter is removing an item from the options set, it checks if it is the default, and if it is, sets the default to undefined.
I also added a bit more code, to get more context as to what I am working towards.
I know this is old, but I spent a long time trying to figure out the best way to handle this.
Turns out it's fixed in Angular 1.4! Try replacing the Angular version in your original plunker with 1.4, and the problem just goes away. I found this out by trying various versions until I narrowed it down.