I have cascading select where the value in the first decided what should be the option of others.
When I change the value of the first select so that the currently selected value in one other is no more a possible choice, I get a null (empty) choice. In place, I want to get a default, not null, value (of course, I don't want to reset to a default value is the choice is still legit).
I looked to (rather) similar question like Why does AngularJS include an empty option in select? but is does not seem to work, perhaps because my options are not predefined but generated on change.
I set-up a jsfiddle with the actual code: http://jsfiddle.net/sXu9a/
choose 2 hours or greater on the first select
chosse 1 in the second select (start hour)
choose back less than 1 hour in the first select
=> the second select display a empty option, and the "startHour" model still contains the last selected value (which is no more a valid choice). I really want to update the ng-model for that option to be reseted to 0.
In fact, I would like to be able to encode the condition: "if current model value for selected option is not in the set of possible value, reassign to model a default value (0)". So I tried a "onChange" like that:
$scope.onChangeInterval = function() {
if(jQuery.inArray($scope.agentSchedule.startHour, $scope.startHours() ) ) {
$scope.agentSchedule.startHour = $scope.startHours()[0];
}
}
But that does not seem to work.
Any idea about that ?
So, it happens that the "onChange" solution DOES work, as long as you don't make typos in the variable of your name. So with the following code (onChange is called on the first select):
$scope.onChangeInterval = function() {
if(jQuery.inArray($scope.agentSchedule.startHour, $scope.hours() ) ) {
$scope.agentSchedule.startHour = $scope.hours()[0];
}
}
Sorry for the noise!
Related
PizzaBuilder1.js
Ingredients.js
Bases.js
PizzaBuilder2.js
PizzaBuilder3.js
I'll try to describe my issue in the least confusing way. So what I'm trying to achieve is create a function(pic4-PizzaBuilder2), where I compare the given key of this.state.ingredients.Bases (and other sub-objects, but that's not important for now) with value of selected option tag in Bases.js and when it matches, set the given value of that key to true. The hierarchy is like this: PizzaBuilder.js > Ingredients.js > Bases.js. I have already managed to match each option value with the key inside the object with the same name. However, what I'm still struggling with is how to access it in PizzaBuilder.js when the select option value I wanna compare it to is 2 trees down (see pic4-PizzaBuilder2, that is supposed to be const selectedOption, but I obviously still need to figure out how to access it). I'll be really grateful for any kind of advice.
I am trying to figure out the best way to handle this. I have a series of form fields with checkboxes for people to select options. When that gets submitted it turns form.optiongroups into an array. I then check to see if the id of the optiongroup is in the array and set the checked value to true in case there were form errors I want them to retain their checked value. This all works fine.
If I only select one option though it doesn't come through as an array, but just a regular form field. Is there a way I can handle this to make sure it is always an array?
Actually, checkboxes get submitted as a list. You must have something else going on that creates the array.
However, to answer your question as asked, you can use ListToArray(). It would be something like this:
if (structkeyexists(form, 'optiongroups') { // if no boxes are checked the variable will be undefined.
if (isArray(form.optiongroups) == false )
form.optiongroups = ListToArray(form.optiongroups)
} else {
code for no boxes checked
}
It could also be done via...
param form.optiongroups = "";
form.optiongroups = ListToArray(form.optiongroups);
I have a mask setup on a date field using the angular-ui masks module like so:
<input type="text"
id="date"
ng-model="transaction.date"
ui-mask="99/99/9999" />
If I have 30/05/2013 in the field and want to change that to 10/05/2013 by simply putting a '1' at the start it pushes all the characters over so it becomes 13/00/5201.
Is there way to force ui-mask to overwrite the character insted of inserting it? (This would save someone from hitting 'delete' then the character.
Example: http://jsfiddle.net/5NbD7/
If you type '30' at the front of my example you will end up with 30/01/0120 I would rather it override the characters and produce 30/01/2010
I don't know it there is an easier way, but you try the following :
You will need to download mask.js, unminified, from source and link it in your html, if you haven't already done so.
https://rawgithub.com/angular-ui/ui-utils/master/modules/mask/mask.js
Then you will need to modify the source code of mask.js like this (seach for the comment //Update Values and put this code below) :
...
// Update values
if (oldValueUnmasked !== "" && oldValueUnmasked!==valUnmasked && !isDeletion) {
var charIndex = maskCaretMap.indexOf(caretPos);
if (charIndex === -1) {
charIndex = maskCaretMap.indexOf(caretPos+1);
}
valUnmasked=valUnmasked.substr(0,charIndex).concat(oldValueUnmasked.substr(charIndex,valUnmasked.length));
}
...
Now, before updating the value, mask will do a concatenation of the characters in the old value and those in the new value, depending on the position of the cursor (caret).
It's by no means an ironproof solution, but it should give you an idea of where to look if you want to customise the input more or check that this change does not break anything else.
Fiddle:
http://jsfiddle.net/CALvj/
I think that the way typed characters are inserted or overwrite input text depends on the keyboard current insert mode. Users can simply change the default pressing the Ins key.
The only way to change it from code would be forcing an Ins key press but this isn't allowed in Javascript.
I have two dependent combo-boxes and the value of second one is populated after some value in the first has been selected.
For this, I am using setValue for the second combo-box at the select event of first one.
Below are the two cases of code, here case 1 doesn't work but case 2 works in IE9:
Case1: This doesn't work
select:function(combo, record){
Ext.getCmp('voyageMonitoritngVesselCode').store.load();//Loading the store of second combobox
Ext.getCmp('voyageMonitoritngVesselCode').setValue(record[0].data.vslCd);//Setting the value in the second combo-box
}
Case2: This works
select:function(combo, record){
Ext.getCmp('voyageMonitoritngVesselCode').store.load();//Loading the store of second combobox
alert(record[0].data.vslCd);//The only difference in both cases is this line
Ext.getCmp('voyageMonitoritngVesselCode').setValue(record[0].data.vslCd);//Setting the value in the second combo-box
}
That is, when I write an alert statment between loading of store and setting the value, then the values gets displayed in the second combobox, but if I omit this alert then there is no value set in the combobox.
I felt that probably the store needs time to load and it could be getting this time from the alert message halt. But as a solution for this, I used autoload:true for the second combo, so that the store doesn't have to be loaded but still the case was same - the value was not getting set without alert.
Could anyone please throw some light at this.
Browser - IE9
ExtJS - 4
Thanks in Advance.
The second doesn;t work because the load is an asynchron request meaning that the store is not loaded yet when you trie to set value, setting an alert before it gives it enough tme to load it ... a quick fix would be:
var combo = Ext.getCmp('voyageMonitoritngVesselCode');
combo.store.load({
callback:function(r, options, success) {
combo.setValue(record[0].data.vslCd);
}
});
I have a listbox defined in XAML and I filter its items using the following code from text obtained from a textbox:
if (list.Items.Count > 0)
{
CollectionViewSource.GetDefaultView(list.Items).Filter =
new Predicate<object>((item) => {
string valtoCheck = item.ToString();
return valtoCheck.StartsWith(filterText,
StringComparison.CurrentCultureIgnoreCase);
});
}
Everything works fine, except in the case where the filter finds no items matching the criteria.
ex. Lets say I have 4 items in the list : Rob,Bob,Andy,John.
When I enter Ro, the list filters accordingly (shows rob).
When I enter b, the list gets filtered appropriately (shows bob).
However, if i enter z (the target list becomes empty), I get an empty list which is correct; but then List.Items.Count is set to zero from that point on. The list becomes empty. I would assume that typing a replacement b should show me Bob but it does not; the list's items are set to empty as soon as I enter text that is not contained in any of the items in the listbox!
Am I missing something here?
I dont see you cannot eliminate the if condition check and just have
CollectionViewSource.GetDefaultView(list.Items).Filter =
new Predicate<object>((item) => {
string valtoCheck = item.ToString();
return valtoCheck.StartsWith(filterText,
StringComparison.CurrentCultureIgnoreCase);
});
It's hard to tell without seeing more of the surrounding code but issues like this are usually related to Refresh not being called at the right times. It also looks like you may be reassigning the Filter over and over instead of setting it once and refreshing when the filter text changes.