I need the value that is obtained from my db is selected. Inspect in html, I see that the value of one of the <option> changes to: selected="selected" but in the select it is not really selected.
Here is my code:
<select chosen class="form-control" name="state" ng-model="product.state" ng-change="updateData()" placeholder-text-single="'Select one'" required >
<option value="">Select one</option>
<option ng-repeat='i in statesList' value="{{i.id}}" ng-selected="i.id == product.state.id">{{i.name}}</option>
</select>
I tried to change the value of ng-model by ng-model="product.state.id" and it works, it stays selected, but of course, the data is not saved later.
statesList is the array of objects that are retrieved from a mongodb database collection.
I have read other similar questions but I can not solve my problem with them. I am new at angular and there are complicated problems for me. What solution is there? How can i fix it?
No need to have ng-change handler.
Try below approach by using ng-options. The model will always have latest selected value.
<select name="state" id="state"
ng-options="option.name for option in statesList track by option.id"
ng-model="product.state"></select>
In my project i have handled selects control with Reactive form, you can try like this
this.testForm = this.formBuilder.group({
"testselectControl": []});
in html
<select id="test1" formControlName="testselectControl"
class="form-control p-0 start-date-input-box ">
<option *ngFor="let val of listValues" [value]="val.id">
{{name.name}}</option>
</select>
when you receive data set value like this
this.testForm .get("testselectControl").setValue(listValues ? (listValues.find((value) => (value.id.trim() ==selectedValueId) : "0");
<select multiple ui-select2="{allowClear: true}" ng-
model="selectedCountries" data-placeholder="Countries">
<option ng-repeat="country in countries" value="{{country.id}}">
{{country.name}}</option>
</select>
<button ng-click="fetch()" class="btn btn-primary pull-right">Apply</button>
the solution of adding priority worked
Related
I am trying to make a form in Angular with a select box whose values are taken from an array. I also need the form to show inputs based on the value of that select. This is the code:
<select #freq formControlName="freq" class="m-2">
<option disabled>Select</option>
<option value="">Select Option</option>
<option *ngFor="let x of freq_list" [ngValue]="x">{{x}}</option>
</select>
<div *ngIf="freq.value!=''">
{{freq.value}}
<div *ngFor="let x of parameter_config[freq.value]">
<input type="number" formControlName="input1">
</div>
</div>
where freq_list is a simple string[]=['option1',option2',option3'] and parameter_config is a map {[id:string]: string[];}where the id is the a value of freq_list.
And this is the form creation:
form=this.fb.group({
freq:'',
});
Everything works except that the value returned by the selected option is not simply 'option1' but it is preceded by the order in the list (e.g. '1: option1', '2: option2', ...)
Is there something I am missing? How is this the default behavior?
replace ngValue with value
<option *ngFor="let x of freq_list" [ngValue]="x">{{x}}</option>
should be
<option *ngFor="let x of freq_list" [value]="x">{{x}}</option>
I'm a little bit confused with Angular and ng-options.
I have a simple array and I want to init a select with it. But, I want that options value = label.
script.js
$scope.options = ['var1', 'var2', 'var3'];
html
<select ng-model="myselect" ng-options="o for o in options"></select>
What I get:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
What I want:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
So I tried:
<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>
<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>
(But it didn’t work.)
Edit:
My form is submitted externally, which is why I need 'var1' as the value instead of 0.
You actually had it correct in your third attempt.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
See a working example here:
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
The trick is that AngularJS writes the keys as numbers from 0 to n anyway, and translates back when updating the model.
As a result, the HTML will look incorrect but the model will still be set properly when choosing a value. (i.e. AngularJS will translate '0' back to 'var1')
The solution by Epokk also works, however if you're loading data asynchronously you might find it doesn't always update correctly. Using ngOptions will correctly refresh when the scope changes.
You can use ng-repeat with option like this:
<form>
<select ng-model="yourSelect"
ng-options="option as option for option in ['var1', 'var2', 'var3']"
ng-init="yourSelect='var1'"></select>
<input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>
When you submit your form you can get value of input hidden.
DEMO
ng-selected
ng-repeat
If you setup your select like the following:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
you will get:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
working fiddle: http://jsfiddle.net/x8kCZ/15/
you could use something like
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
using ng-selected you preselect the option in case myselect was prefilled.
I prefer this method over ng-options anyway, as ng-options only works with arrays. ng-repeat also works with json-like objects.
<select ng-model="option" ng-options="o for o in options">
$scope.option will be equal to 'var1' after change, even you see value="0" in generated html
plunker
here i attached the code of select can we add the textbox and button into select2 elements.
here which i used a code:
<select style="width:100%" id="e9">
<option value="volvo">Suger</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
here i attached the output image how i really want:
here is the answer...
$(".select2-drop").append('<div><input type="text" style="width: 86%;padding: 9px;"name="lname"><input class="PrimaryBtn" type="submit" value="Add"></div>');
$("#e9").select2("container").find("div.select2-drop").append('<div><input type="text" name="lname"><input class="PrimaryBtn" type="submit" value="Add"></div>');
may be this will help, it will add to the needed select2 only
I have two select list that are equal how do i access the second one?
I have put a value on the first one but when putting a value to the second it goes to the first.
Anyone can help me.
<div id="selectNumber">
<select id="numbers" name="numbers" tabindex="5" onchange="changeNumbers(this);">
<option value="" selected="selected"></option>
<option value="all">25</option>
<option value="123">26</option>
<option value="124">27</option>
</select>
<a onclick="addRemoveSelectedNumber(this);">
<img src="../../static/images/delete.png">
</a>
</div>
<div id="selectNumber">
<select id="numbers" name="numbers" tabindex="5" onchange="changeNumbers(this);">
<option value="" selected="selected"></option>
<option value="all">25</option>
<option value="123">26</option>
<option value="124">27</option>
</select>
<a onclick="addRemoveSelectedNumber(this);">
<img src="../../static/images/delete.png">
</a>
Tanks
This will select 25 from the second select list:
browser.select_list(:id => "numbers", :index => 1).select "25"
More information: Multiple Attributes chapter at https://github.com/zeljkofilipin/watirbook/blob/master/link.md
By the way, you should report a bug that there are multiple instances of HTML elements with the same id on the page. Per the HTML standard, ID values should be unique
Hay all,
I am trying to validate a select in kohana 3.0 and I am using the necessary rules. However the validation does no "kick in" when the user does not make a selection.
<select id="discipline" name="discipline" >
<option value="0"> -- Select One -- </option>
<option value="-2">Information Technology and Engineering</option>
<option value="4">Business and Training Seminars</option>
</select>
That was my select, now i have applied these rules to the post array before i check for validation errors.
$post = Validate::factory($_POST)
->rule('discipline', 'not_empty')
->rule('discipline', 'numeric');
When I submit the form without making a selection, the form submits and the rules should stop it.
Any ideas ?
Your still putting a value for the first one, as 0. Leave the value as value="". 0 is numeric and considered not empty.
Replace 0 with blank string
Add ->rule('discipline', 'in_array', array(array(-2, 4))); to check that selected discipline is within valid collection.
string empty first option
<select name="fruit" required>
<option value="">select fruit</option>
<option value="banana">banana</option>
</select>
then some css may help
form:invalid button[type="submit"], form:invalid input[type="submit"] {
opacity: 0.5;
cursor: default;
}