input dropdown menu doesn't bind with ng-model - javascript

I add a task, then click edit, the priority dropdown menu isn't render. I wonder what's is wrong. Take a look my full code here
http://jsfiddle.net/U3pVM/3801/
it appear to be {{task.priorty}}, not rending with ng-model?

Try this in the second drop-down
<select ng-show="editable" ng-model="task.priorty" ng-options="priority.level as priority.level for priority in priority">
</select>
Fiddle
You needed to add the model of the selected task to the edit drop-down list. Also, you had to specify that the value of each item in the edit drop-down is the level property.
In the first drop-down, you are selecting the entire priority object as the value of each drop-down. However, you only assigned the priority.level to task (and not the entire priority object). Hence, in the edit drop-down, the priority.level as... specifies that you are trying to match the level property alone with your model.

You forgot to add ng-Model to your second select (without ngModel your select control won't work).
Example:
<select ng-show="editable" ng-model="selected_priority2" ng-options="priority.level for priority in priority">
<option value="">{{tasks.priorty}}</option>
</select>
Updated your jsFiddle

Related

Disable re-select when model was selected in Angularjs-chosen

I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.

Angularjs empty dropdown with ngModel

Hi in my controller I am assigning following value
Than in html dropdown I have,
<div n-repeat="a in area">
<select ng-options="" ng-model="area.location" ></select>
<div>
Basically I want to show dropdown and only have one value selected which is area.location.
I tried it with empty ng-options or no ng-options it doesn't work.
Due to the way same field works in other section I cant use span or input to show this value has to show in a dropdown.
Please let me know how I can show just on value from ng-model as selected in dropdown.
Thanks
There are a few issues on your code:
First, if you want the tag to repeat, you should put the ng-repeat directive on the tag.
Second, you shouldn't use both ng-repeat and ng-options, You'll just get a wrong result.
Third, when you use the ng-repeat at this form nh-repeat="a in area", the a is the single item. so write ng-model ="a.location" instead of area.location.
area is the array, which probably doesn't have the property "location"
Hope this is what you need:
<select ng-model="selectedArea" ng-options="a.location for a in area">
</select>

Autofocus blank space in dropbox without creating an empty option?

I have a select that has dynamically created option option[0] always ends up being autofocused making my onchange not work if I want to choose the first option.
The index of the options matter so creating a " " option won't work.
Any ideas?
edit: The user creates an object. When the user saves the object, it creates a new option in the select tag. The user selects something from the select tag to go back to that object.
The autofocus is always on option[0] until they selected something else even if they created a new object/option so if they wanted to pick the first thing, but was on the second or third the user would have to click on another option first then click on the one they want.
What I want is that it doesn't focus on any of the options so that they could click on option[0] from the beginning regardless of whether they've selected anything from the dropdown.
Seems like a lot of work to workaround this issue, instead of changing one of your requirements. You say that the index corresponds to an index into an array of objects. Why can't you have the first option blank or "Select...", and then simply subtract one for your lookup into the array?
Or, have the values correspond to the array index, or use custom data attributes to store the array indexes? Seems like any of these would be easier than trying to force a consistent behavior for an unsupported functionality across multiple browsers.
A Select box always has one of its options selected (unless it doesn't have any options). You might need to use a different event (onclick, perhaps) and test the value to see if it has changed.
You can add a default empty selected option with:
<option selected="selected" disabled="disabled" hidden="hidden" value=""></option>
The select is empty by default, with the void option not selectable in the options list.

Chosen select an option by default with jQuery

I have one select box with options and I am using jQuery "Chosen" on a Zend View. This plugin is working fine.
Javascript:
$('#select_type').chosen();
My problem is I need to select one of the options when the page loads depending on what the value of type_id is. I tried this:
document.getElementById('select_type').value = '<?=$this->type_id?>';
This changes its value but the option is not selected in the JQuery chosen.
Any ideas?
EDIT: The option successfully changes by doing what I have mentioned above but it does not update/change the selected element in jQuery "chosen" plugin. My question is about updating the selected value for jQuery Chosen not the HTML SELECT (which I have done successfully). Here is a link to jQuery Chosen plugin
Update list with JS
After you run:
document.getElementById('select_type').value = '<?=$this->type_id?>';
For Chosen version 1 and above (newer)
You should call:
$('#select_type').trigger('chosen:updated');
Taken from the Chosen documentation:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.
$("#form_field").trigger("chosen:updated");
See the change log for the announcement of this API change.
For Chosen versions below 1 (older)
You should call:
$('#select_type').trigger('liszt:updated');
Taken from the Chosen documentation:
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen
to pick up the changes, you'll need to trigger the "liszt:updated"
event on the field. Chosen will re-build itself based on the updated
content.
jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
Set the value before calling Chosen
Instead of doing this from JS why don't you just set the selected option in the HTML before calling the Chosen plugin with JavaScript? You are setting the value from a piece of PHP so I don't see why this couldn't be done.
You can just set the correct elements with the attribute selected like so:
<select name="teams[]" data-placeholder="Chose an option:"
class="chzn-select" multiple tabindex="6">
<option value=""></option>
<option selected="selected">Dallas Cowboys</option>
<option selected="selected">New York Giants</option>
<option>Philadelphia Eagles</option>
<option>Washington Redskins</option>
</select>
Chosen will take care to initialize itself and show the two pre-selected choices.
Try this:
$("#select_type").val(<?=$this->type_id?>).trigger('change');
$('#select_type').trigger('liszt:updated');
Try this:
$('#select_type').val('<?=$this->type_id;?>'); // Select the value before .chosen();
$('#select_type').chosen();
$('#select_type').val('<?=$this->type_id?>');
try it
Try the following:
$("#choen-presentacion").val(value.id_presentacion).trigger('chosen:updated')

How do I display the selected values in an <html:select> when the page loads?

I have a JSP page which contains an HTML <select> populated with all countries loaded from a database. Say for example, on "create user" all the country values are loaded in the select menu and I select 5 countries. Those 5 values are loaded into database for that particular user.
Now when I click on "modify user" for that userid again there will be a select menu and all the countries will be loaded in the select menu but those 5 countries should be highlighted/selected.
How do I accomplish this using javascript?
I am not sure if I understand the question correctly, but here is a multiple selection list:
<select multiple="multiple">
<option value ="UK">UK</option>
<option value ="France" selected="selected">France</option>
<option value ="Germany">Germany</option>
<option value ="Italy" selected="selected">Italy</option>
</select>
As I understand it, no javascript is required. If you want to use AJAX to update the list dynamically, then you need to add the selected attribute to the items that need to be highlighted. You can easily do that with a javascript library.
javascript may not be the best answer, although it is certainly doable that way.
In the JSP page, I'm assuming you have a loop that populates the HTML <select> options. In that loop, place a test to see if the current value was selected for the user. If so, add a selected="selected" attribute/value pair to the <option> for that country.
If you really want to do this in javascript, the same logic applies: loop through the option elements for the select, and set selected to true for the appropriate elements.
As an alternative, you can have your JSP generate the appropriate javascript lines to set only those options that are selected, saving a loop through all countries on page load.
Have the javascript function invoked through the page load event so that the selections are made when the page is displayed.

Categories