AngularJS 1.x: perform code while in data-ng-repeat...? - javascript

I have the following code snippet:
<select ng-model="option.optionValue">
<option data-ng-repeat="value in attribute.catalogue.values"
ng-init="option.optionName = value.name"
value="{{value.value}}">{{value.name}}</option>
</select>
The idea was to assign an option.optionName a value of value.name when the selection from the option list is made. This (not a surprise) doesn't work as needed, as it just assigns one value when it runs the code and it doesn't change when any selection is made.
Is there a way to overcome this situation? Maybe add this option.optionName = value.name code in data-ng-repeat?
Thanks!

use ng-options to iterate and initialize the options, and update the alternate variable you want to update in selection (though I don't what is the purpose of that when you already have tat value in the ng-model variable)
<select
ng-model="option.optionValue"
ng-change="option.optionName = option.optionValue.name"
ng-options="value.name for value in attribute.catalogue.values">
</select>

Related

ng-options getting null value in the drop-down.I'm using for controllers?

I'm new to angular .I'm passing ng-model for selected option in the drop-down.
My code is
<label>Tables</label><select ng-options="option.display for option in
tableviewOptions" ng-model="selectedOption" ng-change="getView
(selectedOption)></select>
In this I'm I changed table options the option is not showing as selected in the DOM.
we have updated your question. But I have post it as an answer with some changes
like option.display is wrong, that should be like below .
<label>Tables</label><select ng-options="option as option.display for option in
tableviewOptions" ng-model="selectedOption" ng-change="getView
(selectedOption)></select>
But if you post your controller code and JSON data , then it could be better to avoid guess answers
#ramesh rajendran thanks for your answer...
Actually my issue with code confirmation in the jsp file.I'm using more than one controller in my application so the the scope value is getting null for me.Later I've rectified my issue is.
Your ng-options syntax is wrong.
It's like ng-options="value as text for option in Options"
so you have to pass variables accordingly
In your case, if you want to get option.display as value your tag would be
<label>Tables</label>
<select ng-options="option.display as option.display for option in
tableviewOptions" ng-model="selectedOption" ng-change="getView
(selectedOption)></select>
you can remove the space by adding this code
select:option:empty
{
display:none
}

Set Knockout dropdown value dynamically

I have a dropdown value which is proving very difficult to set in the console. I have tried using Jquery .val and using document.getEWlementById.value and both will not set the item. Does anyone know how I can set the value of the dropdown using the value? I think the problem is that it is using Knockout which makes it more difficult to set it dynamically.
Here is the HTML:
<select id="sourceShippingLocations" data-bind="options: $root.ShippingLocations, optionsText:'Name', optionsCaption:'Select location', value: $root.SelectedOriginShippingLocation" class="form-control" title="">
<option value="">Select location</option>
<option value="">doo Warehouse</option>
<option value="">moo</option>
<option value="">Manchester</option>
</select>
Knockout doesn't make it "more difficult to set dynamically". It just works differently.
In knockout, a viewmodel dictates what happens in the view. In other words: you don't set the value of the select through modifying the attribute directly, but you change the selected value of the underlying model and knockout manages the UI state for you.
Each of the <option> elements represents a value in an array named $root.ShippingLocations. The selected value is stored in $root.SelectedOriginShippingLocation.
In the viewmodel, you'd update the current selection by doing something like:
this.SelectedOriginShippingLocation(this.ShippingLocations()[0])
(this sets the selection to the first shipping location)
If you want to see this in action without having to modify the viewmodel, you can hack this in your console:
var root = ko.contextFor(document.getElementById("sourceShippingLocations")).$root;
root.SelectedOriginShippingLocation(ko.unwrap(root.ShippingLocations)[0]);
// change 0 for the index you like

How do I get selected value from Drop Down List?

I have a drop down list (DDL)...
I would usually just use $('#ddl option:selected').val()
but I have stored the jQuery object...
var myDDL = $('#ddl');
I can't figure out how I would use the variable myDDL alongside with option:selected
Not sure how to word my question really...
You simply need to call val() on the select object to get the selected value.
$('#ddl').val()
To get the variable just for the sake of knowing you can use find
selectedVal = myDDL.find('option:selected').val();
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. In the case of select elements, it
returns null when no option is selected and an array containing the
value of each selected option when there is at least one and it is
possible to select more because the multiple attribute is present, jQuery Docs
Please try this.
Call this below function to see the effects.
----------------------- JS-Code -----------------------
TestFunction();
function TestFunction() {
var myDDL = $('#ddl');
var selectedVal = myDDL.find('option:selected').val();
alert(selectedVal);
}
-------------------- HTML Code --------------------------
<div id="divTest">
<select id="ddl">
<option>one</option>
<option selected="selected">two</option>
</select>
</div>
HTML:
<select id="ddlCountry" name="ddlCountry">
<option selected="selected" value="1">India
</option>
<option value="2">USA
</option>
</select>
JQuery:
$('#ddlCountry').val()
I hope this helps. If this does resolve your problem, please mark the post as answered.
Thanks,
Prashant
Try with this:
myDDL.find('option:selected').val();
As myDDL is a jQuery object, so you can use .find() method to get the selected value.

How do I populate value to second input field based on a onchange event on a 'select' input?

I am looking to duplicate the value of a select input into a second input field using Javascript. I tried to do this using an onchange event call. What should the js code be in order to populate the input field id ='sort' upon change in the select function?
Here is my code
<input id = "sort">
<select name="sort_select" onchange="document.getElementById('sort').value = ('#sort_select').val();">
<option value="Ascending"> Ascending</option>
<option value="Descending"> Descending</option>
</select>
This does not work. I see the error lies in value assignment (('#sort_select').val();)What is the correct way to do this?
JS solution: FIDDLE
change this:
<select name="sort_select" onchange="document.getElementById('sort').value = ('#sort_select').val();">
to
<select name="sort_select" onchange="document.getElementById('sort').value = this.value;">
Use this code
$("select").change(function(){
$("#sort").val($(this).val());
});
Fiddle
http://jsfiddle.net/5S7mh/
onChange="document.getElementById('sort').value = (this.options[this.selectedIndex]).value;"
Don't use that big ugly line as inline JS though.
Also, start with populating the input box.

Is there a simple way to know the starting value of a select?

I'd like to do this simply without saving the starting value of the select in an object.
if i have (when i load the dom):
<select>
<option value='1' selected>one</option>
<option value='2' >Two</option>
and than i later change the selection so that another option is selected, is there some kind of property that stores the value of the option that was originally selected?
I think this sholud work:
$("select option[selected]").val()
fiddle: http://jsfiddle.net/4dCMd/
Tested this way in different browsers: seems to be broken in IE7/8, works in last Chrome, FF and IE9
You should use the defaultSelected property of the options object to test if it was selected by default.
http://www.javascriptkit.com/jsref/select.shtml
use this
$('select').find('option[selected]').val();
DEMO
$('select').each(function(){
$(this).data('originalValue',$(this).val());
});
You could do this on .ready. It'll store the default values of every select in it's data object.
Oh just re-read your question and you said that's exactly what you don't want.
Well, i don't think there's another efficient way to do it so i'll leave it here anyway.
simple to use filter to get any default selected options:
var def = $("select > option").filter(function () {
return this.defaultSelected;
});
DEMO
DefaultSelected
Reflects the value of the selected HTML attribute. which indicates whether the option is selected by default.

Categories