select in angularjs not selecting default value - javascript

Following is my code extract
<select
ng-init="joinedStatus=0"
ng-options="joinstat.name for joinstat in joined track by joinstat.id"
ng-selected="joinedStatus==joinstat.id"
ng-model="joinedStatus">
<option>{{joinedStatus}}</option>
</select>
But still there is no default option selected.
joined is defined as:
$scope.joined=[{id:0,name:'No'},{id:8,name:'Yes'}];

You should not provide <option> inside select since ng-options will add the options from specified array.
ng-selected is of no use. Remove it too.
So, this will work
<select ng-init="joinedStatus=joined[0]"
ng-options="joinstat.name for joinstat in joined track by joinstat.id"
ng-model="joinedStatus">
</select>
Since we have initialized the model with 0th array element. You will see this selected in the select.

Related

How to handle HTML `select` multiple value in Node back end if only one option is selected

I have an HTML select element with the multiple attribute where users can select one or more options, sending to a Node back end through body-parser.
If the user selects more than one option, body-parser turns it into an array. However if the user only selects one option, it just sends a string of the one option's value.
I have a loop to process each selected value, but when only the string is sent, it tries to loop over each individual character.
I'd rather not have to check typeof req.body.selectElement and have essentially the same logic for a single string, or each string element of an array. Is there a better way to handle this?
I believe it's convention for named fields ending with square brackets [] to be treated as arrays, so I would try adding [] to the end of the name field of your select element.
For example:
<select name="data[]" multiple>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>

How to prevent Angular1.0 select (dropdown) extra white space?

I am working on an AngularJS 1.0 application and facing an issue with Angular Select.
Just Copying a dummy code:
<select ng-model ="data.state" ng-options="data.states">
Select
Here, it's listing states of a country and passing a default data as ng-model.
I need to show a text "Select" if default is not matching with the data source.
But it's not working as expected and it's showing an extra empty space instead of select.
Thanks
"I need to show a text "Select" if default is not matching with the data source." In this case your data.state may be empty (ie "") case. You may be expecting some logic like this:
<label>States : </label>
<select ng-model ="data.state" ng-options="data for data in data.states" >
<option value="" selected hidden >SELECT</option>
<!--Removes the Empty space and shows "SELECT" as pre-populated by default in the drop-down. -->
</select>
<br>Selected State : {{data.state}}
Empty space appears as a placeholder offered by Angular to hold text like "Select an option" or "Choose a best answer". You can override this using the <option value="" selected hidden >Select</option> which won't appear in the selected drop down options list as it is hidden.
If you wish to have the select appear as an option for user to choose in order if the field can be remained empty and is not mandatory you can use the following code instead:
<option value="" selected >SELECT</option>
In controller expecting the data as:
// $scope.data.state = something that is returned from some API response
$scope.data = {
states: [
"Kerala",
"Karnataka",
"Andhra",
"Haryana"
]
}
Checkout the JS Fiddle here for working sample.
<select ng-model ="data.state" ng-options="data.states">
make use of track by in ng-repeat. track by $index or id if any

jQuery: unselect option in select element

I faced with a strange behaviour of select element. So, I have a select element with several options. One of option is empty - it's required by plugin to output placeholder.
I needed functionality that would clear selected options and I wrote something like:
$(element).val('');
$(element).find("option:selected").removeAttr("selected");
The thing is that "selected" attribute is still here and it's on old option - you can see it in the code sample.
So, I have 2 questions:
1) Why .val() method of jQuery library do not update "selected" attribute in options list?
2) Why I can not update "selected" attribute in my case? If I switch these statements it's working:
$(element).find("option:selected").removeAttr("selected");
$(element).val('');
Code sample:
$(function(){
$("#unselect").click(function(){
$("#lang_type").val('');
$("#lang_type").find("option:selected").removeAttr("selected");
alert($("#lang_type").html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_type">
<option value=""></option>
<option value="01">01 - Language of text</option>
<option value="02">02 - Original language of a translated text</option>
<option selected="selected" value="03">03 - Language of abstracts</option>
<option value="04">04 - Rights language</option>
<option value="05">05 - Rights-excluded language</option>
<option value="06">06 - Original language in a multilingual edition</option>
<option value="07">07 - Translated language in a multilingual edition</option>
<option value="08">08 - Language of audio track</option>
<option value="09">09 - Language of subtitles</option>
</select>
<button id="unselect">Unselect</button>
EDIT:
You can use prop(false) property like this
$(function(){
$("#unselect").click(function(){
$("#lang_type").val('');
$("#lang_type").find("option:selected").prop('selected',false);
});
});
Like #yezzz said, read this :
Note: Do not use removeProp() method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.
If I'm not mistaken, a multi-select can be initially unselected, but once any option is selected, it can not be unselected any more. RFC 1866 states in section 8.1.3:
The initial state has the first option selected, unless a SELECTED attribute is present on any of the elements.
This lets me to believe that one option MUST always be selected. Obviously, different browsers interpret this differently...
But it does not seem to be a jQuery issue, rather a browser implementation issue.
The selected attribute reflects merely the initial state of the select input. You shouldn't really care about removing it, as it affects nothing once a different option is selected (either by the user or by a script on your page).
The current state of the input can be read or modified via the selectedIndex property, where a value of -1 means no option is selected (which never is the default, as there always is an option selected initially). However, you seem to want to select a particular "empty" option.
Setting the value on a select box results in the corresponding option being selected, which, in your case, is the very first one.
The code probably does exactly what you want. So don't mind checking the HTML, as the selected attribute - again - is unrelated to the current state of the input.
The :selected selector, however, matches the elements that are currently selected. Your first snippet selects an option, thus making it :selected, then attempts to remove a non-existent attribute from it. The second snippet of yours assumes that the selection remains on the option that was initially selected, and then removes the attribute from it. What follows is the "empty" option getting selected, and no more steps need to be taken, as that's all it takes to select an option.
To summarize: you can safely drop all the code that deals with the removal of the selected attribute, as it doesn't affect the current state of the element, the state being already tied to the correct option.

Angular Chosen - Don't bind ng-model to entire object

Using Angular Chosen
https://github.com/localytics/angular-chosen
and testing out the following example
<select multiple
chosen
ng-model="state"
ng-options="s.name for s in states">
<option value=""></option>
</select>
However, I'm wondering as to how one would bind just the name value for a state object to ng-model?
The options presented will display just the state names, but when chosen, the entire state object is bound to ng-model rather than just the selected name.
Any thoughts would be much appreictaed as always!
You can try this format
select as label for value in array
eg. s.name as s.name for s in states

knockout using one option list for selectedOptions on multiple selectboxes

http://jsfiddle.net/E2AMX/ has the exact demonstration of the problem, which is:
I have multiple select boxes on the same page. All the options of the selectboxes are in the given form:
<option value="#id_num">StringVal</option>
and i have one observableArray (say idlist) of id_nums with no separation regarding selectboxes. For example,
idlist = ko.observableArray([1,2,3,4]);
and the selectboxes are as
<select name="first" data-bind="selectedOptions: idlist">
...
<option value="2">Blah</option>
<option value="3">Blah</option>
...
</select>
<select name="second" data-bind="selectedOptions: idlist">
...
<option value="1">Blah</option>
...
</select>
<select name="third" data-bind="selectedOptions: idlist">
...
<option value="4">Blah</option>
...
</select>
My problem is: when i select one option from a selectbox, other selectboxes return to their initial states. This is directly related to selectedOptions, for if i remove the selectedOptions directive, this problem does not occur.
Any suggestions will be very welcomed.
Thanks.
The selectedOptions binding is meant to be used on a single <select> tag with multi-select enabled. It will keep an array of each item in the options box selected.
The reason you are seeing the behavior you are is because when you you select a single value from one of the drop downs, the selectedOptions binding immediately fires. The logic goes something like this:
Update on target <select> fires.
Binding extracts the value from <option> and updates the underlying observable array.
Observable array fires update since values have changed.
Secondary drop downs respond to update, and update their selected value based on what is in the array.
Since no value exists in the set of <option> tags, the value is cleared.
This is why you are seeing this behavior. If you want to collect a composite from all selected options, then you will either need to write a new custom binding, or create a seperate array for each <select> you want to bind to.

Categories