My problem is when I use a custom filter on ngOptions it creates a blank option. What I want is to have the first index of the filtered array to be selected and therefore the blank option removed.
I've search this forum for similar problems, but couldn't find any posts that addressed my problem - or I'm unable to understand the answers :)
Some of the things I've tried:
ng-init="option.selectedEnd=$first"
ng-init="option.selectedEnd=oppositeEnds[0]"
ng-selected="$first"
I've created a short fiddle for you guys: Fiddle
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options.
If you want to get rid of the empty option just select an initial value in your controller, something like:
$scope.form.type = $scope.typeOptions[0].value;
Here is the jsFiddle: http://jsfiddle.net/MTfRD/3/
You need to select a valid model value to get rid of this empty option.
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...
I am making an app that shows a list of items, and that list can then be refined by multiple filters. If I were to fetch a list of those options from the URL string, then that would allow visitors to share (or bookmark) a link that takes you to a filtered list of data. But my questions is how would I write those options to the URL string?
So the idea is that once a select element has been changed, to refine the results. Let's say for example that it's just the order of the items.
<select ng-model="order" ng-change="changeOrder()">
<option ng-repeat="['date', 'amplitude', 'name'] as option">{{ option }}</option>
</select>
I would want to write that option into the URL string, so that it now contains (if you've selected amplitude) ?order=amplitude. Now, if you refresh the page, the data can easily be sorted by amplitude again.
But when there is a lot of those filters and sorting options, and they can be both set or reset to default, it becomes rather difficult to put those options all together, to check if an option is already in the string so as to not have it twice, and whether to add it behind a ? if there are no other options, or a & if there are other options already defined.
So in other words, what I want to know is does ngRoute provide methods to set parameters; not just read them? So I could do something like $routeParams.set("order", "amplitude").
If you want to change the URL, you should do this through the $location service.
Specifically the $location.search(search, paramValue) will allow you to change the query string values.
I made a plunk that demonstrates both using HTML5 mode and changing the $location using these functions. It can be found here. In order to see the URL change, click the pop-out button .
You don't have to do the string parsing yourself. AngularJS will also allow you (with the same function) to query the currently set parameters. So it's a matter of querying all the URL values, changing the one for which filter you're changing, and then setting the values back.
This is what the second button in the example demonstrates. Even though the first button will only set its own value (and remove the others), the second button will keep all other items as well.
The relevant code:
var values = $location.search();
values.orderThatsUpdating = newOrderValue;
$location.search(values);
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
I have a really basic grid using Angular.js and NG-GRID with the showFilter: set to true.
However if I search for the value in the Marketing Start Date Column, 200101011. It doesn't show. Actually as soon as I start typing a 2 in the filter text it should find all four records, but only 2 show up....
Here's the Plnkr
http://plnkr.co/edit/D3nFkQ
Thank you.
The problem appears to be the null values in your table. The search does not seem to go past a cell containing null. Hence the strange filtering behaviour. If you replace the nulls with empty strings or other values the search works perfectly.
There is an issue logged on ng-grid on GitHub - filter search box returns prematurely when cell contains an object. Since null is an object the solution suggested may work for you.
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.