I want to add option dynamically to select box using angular.
For example, if quantity limit is 4 then options should be 1, 2, 3, 4.
This is what i have tried:
<select class="form-control" ng-model="selectedQuantity">
<option value="1">1</option>
<option ng-repeat="n in range(1,edata.Products.QuantityLimit)" value="{{n}}">{{n}}</option>
</select>
Here QuantityLimit different for each select box.
Angular code:
$scope.range = function (min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) input.push(i);
return input;
};
this works as expected if i remove ng-model="selectedQuantity" from select. Is there any way to do this without removing ng-model="selectedQuantity"
You can use inline ngInit directive to set an initial value to the model directly from the view:
<select class="form-control" ng-model="selectedQuantity" ng-init="selectedQuantity = 1">
And of-course, set a default value from the controller:
$scope.selectedQuantity = 1;
Choose the one you like
Try this embedding the options in the select tag itself using ng-options,
<select class="form-control" ng-options="n for n in range(1,edata.Products.QuantityLimit)" ng-model="selectedQuantity">
<option value="1">1</option>
</select>
The first option will be always 1, if you can you can shift it to controller.
Related
Goal is that, when I call myMethod(), I want to have all options unselected.
Currently when I call myMethod() it will deselect only the last option, but the other remain selected if they have been selected.
Solutions:
Not using reactive forms - do it like in the accepted answer
Using reactive forms - this.formName.get('formControlName').setValue([]);
HTML
<select multiple>
<option *ngFor="let user of users"
value="{{user.id}}"
[selected]="usersSelected">{{user.name}}
</option>
</select>
Component
usersSelected: boolean = false;
myMethod(): void {
this.usersSelected = false;
}
Thanks for any help.
You should use [(ngModel)] so you can control the value. Note that its multiple select, so you should use array, not just scalar value.
usersSelected = [];
myMethod(): void {
this.usersSelected = [];
}
And in your template:
<select multiple [(ngModel)]="usersSelected">
<option *ngFor="let user of users" [ngValue]="user.id">{{user.name}}</option>
</select>
Working example: https://stackblitz.com/edit/angular-c9y1jm
I'm working with a chosen select, i added a function call when the event ng-click happens, but it's not doing anything, when i make the call to the same function in a button it works, why is this?
ng-change doesn't work either, even worse, it eats my options and leaves only the first one.
my select code:
<select ng-model="ind_oferta" multiple class="control-group chosen-select" chosen >
<optgroup label="Oferta">
<option value=""> </option>
<option ng-click="aplicarFiltro()" ng-repeat="menuOpcion in menu[0].opciones.oferta" value={{menuOpcion.id}}>
{{menuOpcion.tipo}}</option>
</optgroup>
</select>
the function is very simple, it's just a javascript alert
$scope.aplicarFiltro = function(){
alert("hello");
}
and i think is not worth put the button code, that one works so...
EDIT: i changed the select code to this, still not making the call to the function, help!
<select multiple class="control-group chosen-select" chosen style="width:250px;"
ng-model="ind_oferta" ng-click="aplicarFiltro();"
ng-options="menuOpcion.id as menuOpcion.tipo for menuOpcion in menu[0].opciones.oferta">
<option>--</option>
</select>
You should use the ng-options directive together with ng-model (you can still add a single <option> as the default value). It would probably look something like this:
<select ng-options="menuOpcion.tipo for menuOpcion in menu[0].opciones.oferta"
ng-model="selected"
ng-change="aplicarFiltro()" chosen multiple>
<option value=""></option>
</select>
There is a lot of customization options, so it is best if you check out the documentation.
To get the option which was removed by the user you could do something like this in your controller:
var previousSelection = [];
$scope.changedSelection = function () {
// Check if the current selection contains every element of the previous selection
for (var i = 0; i < previousSelection.length; i++) {
if ($scope.selectModel.indexOf(previousSelection[i]) == -1) {
// previousSelection[i] was deselected
}
}
// Set the previous selection to the current selection
previousSelection = $scope.selectModel;
}
I have a select input with an option called "custom". So when the user selects "custom" from the list the value needs to be that of a corresponding text input box.
<select id="choice" >
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
The "custom" text doesn't need to change, just the value for when the data from the form is collected.
Any ideas?
Thanks
Here you go,
HTML
<select id="choice" onChange="javaScript:getIt(this)">
<option value="">custom</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<input id="custom_choice" />
JavaScript
getIt = function(obj) {
var val = document.getElementById("choice").value;
//If you want to get value then user above line.
var innerhtml = obj.options[obj.selectedIndex].text;
document.getElementById("custom_choice").value = innerhtml;
}
FIDDLE
JavaScript would work best for this, something like this:
Bear in mind these would be two separate files:
var choice = document.getElementById("choice");
var custom_choice = document.getElementById("custom_choice").innerHTML = choice;
I think this may work but you would have to check it.
this is probably a very basic question, but I can't seem to figure it out.
In the code below you can see that I have a select-option block. It works fine. The only problem is that when I select one of the options (and get redirected to the corresponding page), the tick remains at the default value ("Sort...") of the select-option function.
<select name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
When a user selects "Preis aufsteigend", I would like the tick to be displayed at the corresponding option in the field...
Can anybody help?
Thanks in advance!
You need to reverse your onchange function. On page load look for the url variable you set then select the appropriate option.
Script
var sel = document.getElementById('sort');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
if(window.location.search.indexOf(opt.value.split('?')[1]) > -1 ) {
sel.selectedIndex = j;
break;
}
}
HTML
<select id="sort" name="sort" onchange="location = this.options[this.selectedIndex].value;">
<option value="">Sort...</option>
<option value="index.php?ascending=true">Preis aufsteigend</option>
<option value="index.php?descending=true">Preis absteigend</option>
</select>
http://jsfiddle.net/t95wqm48/
I need help with this simple thing. I have a multiple selection input box and I want to get the values of the selected parameter using javascript. The problem is, that when I use:
x=document.form.box.value;
The form looks like this:
<form name="form">
<select name="box" multiple>
<option value="a">A</option>
<option value="b">B</option>
</select>
</form>
I always get just the first selected option. I need to get the values of all selected options as a string, ideally separated by commas. If I for example choose A, I get A, if B, I get B, but when I choose A and B, I get A again.
Any ideas?
First give your select box and ID, this will make it accessible via standard calls:
<select name="box" id="box" multiple>
<option value="a">A</option>
<option value="b">B</option>
</select>
Then you can loop thru individual options, appending only selected ones:
var sel = document.getElementById("box")
var sResult = "";
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected){
sResult += sel.options[i].value + ','
}
}
if (sResult.length > 1) sResult = sResult.substring(0,sResult.length-1);
Working example: http://jsfiddle.net/LGCY6/2/