I have a <select> element in my html page. The <option>s are given through a loop. The selected value is stored using a ng-model. This data is now push to a database. The next time that page reloads I would like the the <select> field to hold the previously selected option. Is there anyway to do it?
I have seen that ng-model generally fills text fields on it own. I tried to do the same with <select>-<option> but it doesn't work
<select ng-model="option">
<option value = "" disabled selected>---Choose an Option--</option>
<option ng-repeat = "x in option" value="x">{{x}}</option>
</select>
When selecting from an array of primitives, use the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.options=["hello","world",1,2,3];
//set previously selected option
$scope.option = "world";
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="option" ng-options="item for item in options">
<option value = "">---Choose an Option--</option>
</select>
<br>selected={{option}}
<body>
One can select using ng-repeat with an array of objects, but not with an array of primitives. Under the hood, the <select> directive annotates each option with tracking information. It can't annotate primitives.
For more information, see
AngularJS <select> Directive API Reference - Choosing between ng-repeat and ng-options
Related
I have this array in my typescript. I'm using angular 6.
formats: any = ['Years/Months/Days', 'Years/Months/Week', 'Months/Days', 'Week/Days', 'Week/Half Days', 'Week/4 Hours', 'Week/Hours', 'Days/Hours/30Min', 'Days/Hours/15Min'];
and this is my html code.
<select class="form-control" formControlName="format">
<option [ngValue]="null">{{'Select Type' | translate}}</option>
<option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
I want to change the dropdown value with help of next and prevoius button.
I recommend you to have a variable for storing the index of the selected option and initialize it to zero, every time the selected value gets changed update the index.
then you can create two buttons for next and previous with click event mapped to both buttons
the .ts file and function might look something like this
selectedindex:any = 0;
changed(event : Event):any{
console.log(event)
if( event.target){
console.log( this.formats.indexOf(this.yourformobject.controls['format'].value))
this.selectedindex = this.formats.indexOf(this.yourformobject.controls['format'].value;
}
}
next():any{
if(this.selectedindex < this.formats.length-1){
this.selectedindex++;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);
}
}
previous():any{
if(this.selectedindex>0){
this.selectedindex--;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);
}
}
and the Html look like this
<form [formGroup]="yourformobject">
<select class="form-control" formControlName="format" (click)="changed($event)">
<option [ngValue]="null">Select Type</option>
<option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
<button (click)="next()">next</button>
<button (click)="previous()">previous</button>
</form>
<select ng-if="field.Type == 'multi-select'" name="SpecialFields_{{::field.FieldID}}" id="SpecialFields_{{::field.FieldID}}" ng-model="vmpUserObj.specialfields[field.FieldID]" class="form-control" ng-options="item.OptionID as item.OptionLabel for item in ::field.FieldOptions track by item.OptionID" multiple>
</select>
How can i make multiple options selected in this select field . the ng-model will be ["177", "178", "176"]
I got it, it was my silly mistake.
Here each element in the array is a string rather than a number. so i converted the elements to integer and it worked perfectly (converted using stringarray.map(Number);)
I have an app angular that can be translate both in french and english. I'm using angular translate to do that. The problem is: I receive an array of object from an API and in those object, I have a property bookConditionEn and a property bookConditionFr and other like ids.
In a select input , I want to display bookCondition depending by the current language.
In the controller, I can get the current language with the $translate service
vm.getCurrentLanguage = function() {
return $translate.use();
}
So, I wonder if in the view I could use a condition in the ng-option.
<select
ng-options="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-model="bookCtrl.bookConditions"
name="Condition" class="form-control"
></select>
You can use conditionals to show/hide options by changing the way you are creating the <select>:
<select ng-options=ng-model="bookCtrl.bookConditions" name="Condition" class="form-control">
<option
ng-repeat="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-if="vm.getCurrentLanguage==bookCondition.language"
>
</select>
I didn't quite understand how you have your JSON set up so I am assuming you have a property that contains the language (bookCondition.language). You can compare this against the user's currently-selected language which is returned by your vm.getCurrentLanguage. By the way, I suggest changing that from a function to just be a variable like this:
vm.currentLanguage = $translate.use();
This should be all you need to do to specify options in a conditional manner.
It worked your way
<select ng-model="bookCtrl.bookCondition" name="Condition" class="form-control">
<option ng-if="bookCtrl.getCurrentLanguage() === 'en'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookCondition}}</option>
<option ng-if="bookCtrl.getCurrentLanguage() === 'fr'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookConditionFr}}</option>
</select>
How do I get the selected option from the HTML select option attribute to a POST request? So
<form method="post" action="new_choice/:pick_an_order/:pick_a_letter">
<select name="pick_an_order">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select name="pick_a_letter">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
If the user selects, as an example, the first option from each, being "First" and "A". Right now I have:
post 'new_choice/:pick_an_order/:pick_a_letter' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
But for some reason it's not saving to #your_choice. How do I get the selected attribute directly to the POST request so that it can be saved to the #your_choice object? Thanks in advance!
You must make a choice. Either you modify the value of the action attribute in your form with the help of Javascript, or you change the route of your resource to post 'new_choice' do and have the values sent as POST parameters.
I'll pick the second one because it seems more logical at the moment:
<form method="post" action="/new_choice">
<select name="pick_an_order">
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<select name="pick_a_letter">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Please note that you must specify the value attribute for each option, that's the actual value sent (whatever text inside the tag is for the users). Then in Sinatra:
post '/new_choice' do
pick_an_order = params[:pick_an_order]
pick_a_letter = params[:pick_a_letter]
#your_choice = YourChoice.new(pick_an_order, pick_a_letter)
redirect '/to_a_page'
end
I would rather use javascript to submit the form because the code is so simple: $(function() {
$('#language').change(function() {
this.form.submit();
});
});
Assign an id to the select tag, in this case it is #language.
I am using AngularJS, and Select2 to create a nice dropdown menu.
I've included an ng-click in the Option tag (of the Select tag). However, the ng-click does not seem to be working when in a Select2.
<select ui-select2 >
<option ng-repeat="car in myGarage" ng-click="ride(car)">
{{car.Name}}
</option>
</select>
It also doesn't seem to work when using a normal Select tag.
How can I get them to work?
JSFiddle:
use ng-change and ng-model instead of ng-click
<select ui-select2 ng-change="ride(car)" ng-model="car">
<option ng-repeat="car in myGarage" value ={{car.Name}}>
{{car.Name}}
</option>
</select>
That is the incorrect way to use a select.
First off, there is ng-options attribute to a select that needs to be used instead of ng-repeat on the options.
Secondly, instead of using ng-click, you can assign a ng-model to the select that updates with the selected car as follows:
In your controller, you need only the following model and you can remove other models
$scope.myGarage = [
{
Name: "Toyota 86"
},
{
Name: "Hyundai Genesis Coupe"
},
{
Name: "Nissan GTR"
},
{
Name: "Veyron"
}
];
In your view, use ng-options and ng-model as follows:
<select ng-model="selectedCarUI" ng-options="car.Name as car.Name
for car in myGarage" ui-select2>
</select>
Using UI-Select2 - Car: {{selectedCarUI}}
<select ng-model="selectedCarNormal" ng-options="car.Name as car.Name
for car in myGarage">
</select>
Using Normal Select - Car: {{selectedCarNormal}}
This should now work. Here is a fiddle for the same
The OP is using angular-ui select2. The following is from the angular-iu/ui-select2 website:
"ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead."
See the "Working with dynamic options" section at https://github.com/angular-ui/ui-select2
So ng-change is probably the best option.
I don't know if is a lit bit late but i just discover how to make it work:
1) I'm using the original Select2
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
2) the html goes as follows:
<select class="form-control js-example-basic-single"
ng-options="item.label for item in yourVector"
ng-change="yourFunction(item)" ng-model="item">
</select>
3) the script at the end of the template:
<script type="text/javascript">
$(".js-example-basic-single").select2();
</script>
it works for me :)