I have seen a lot of examples to bind array of Objects.
But, all I have is this
years = [1900,1901,1902];
and i want to bind this to the options for my select control.
I have this template:
<select id="carYear" required>
<option value="">Select year</option>
<option ngFor="year in years">{{year}}</option>
</select>
But, it does not work.
I also tried ng-repeat. Any ideas what is wrong here?
Fiddle here:
https://jsfiddle.net/frishi/bzbbo5da/
Basically, you can use a flat array and enumerate it using a <select>
The only additional thing you need to do is
<select ng-model="myYears" ng-options="o as o for o in years"></select>
When you use a flat array, you have to tell angular what to use as the key. Angular will do it for you if you use an array of objects.
You're missing an asterisk on the ngFor directive and the let keyword.
Try:
<select id="carYear" required>
<option value="">Select year</option>
<option *ngFor="let year in years">{{year}}</option>
</select>
Related
How can you sort the options in a {select} like this:
<select ng-options="value as name for (value,name) in vm.options" ng-model="vm.selected">
when vm.options is an object (I want to sort by values)?
Context: At some point I needed to add an explicit empty option "" as a valid value. I'd love it to be the first one on the list, but due to how objects work in Javascript I can't get it to cooperate.
You can achieve in the following way
<select ng-options="option.value as option.name for option in vm.options | orderBy:'value'" ng-model="vm.selected"></select>
and if you want to add empty option like 'Select' then
<select ng-options="option.value as option.name for option in vm.options | orderBy:'value'" ng-model="vm.selected">
<option value="" selected>Select</option>
</select>
Please also refer following link
'orderBy' in AngularJs
Below is my code
<select class="form-control" id="prevCountry" name="prevCountry" ng-model="asset.assets.countryID" ng-options="value.ID as value.country for value in technical.country">
<option value="">Select Country</option>
</select>
angularjs code
$scope.technical.assets.push($scope.assets);
I'm posting countryID but I want to push into ng-repeat object the countryName of countryID.
If I understood you right, you need to check the example of ngOptions usage here. Created a Plunker for you. Hope it'll help.
<select name="mySelect" id="mySelect"
ng-options="option.countryName for option in technical.country"
ng-model="asset.assets"></select>
In Angular2, is there a clean way to handle a form control's value as something else than a string, for example have a <select> with options (bool) true and (bool) false?
Currently I'm using solutions that don't feel very elegant:
<select (change)="model.published = !!$event.target.value">
<option value="">No</option>
<option value="1">Yes</option>
</select>
<select (change)="model.type = $event.target.value * 1">
<option value="1">My value is (int) 1</option>
<option value="2">My value is (int) 2</option>
</select>
I'm using <select>s in my example, but I'm interested in other form controls as well.
This question was suggested as a duplicate, but I'm don't think it is one since I'm not
interested only in selects
trying to generate options dynamically
This is a known limitation in the current Angular version https://github.com/angular/angular/issues/2551
Yea just add [(ngModel)]="model.published" to the select and it'll set the value property of the <option> selected, if you add an object in the <option> like this: <option value="{{object}}"> you'll set an object, it doesn't have to be a string.
In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.
Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
So i have these options.
<option value="bentley">Bentley</option>
<option value="ferrari">Ferrari</option>
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="peugeot">Peugeot</option>
<option value="citroen">Citreon</option>
If i click on honda, the honda cars are displayed. IF toyota then toyotas..and so on.
I would like to make an option, where i only reference the luxury cars. Just do not know how to make it work.
<option value"ferrari:bentley">Luxury cars</option>
Any ideas?
Note: It can help others, who would like to reference more than one value in an option. As I was searching around for 1.30 hours there is not much out there.
Thank you in advance
You could use an optgroup
JSfiddle
<select name="carss">
<optgroup label="Luxury cars">
<option>Ferrari</option>
<option>Bentley</option>
<option>Rolls Royce</option>
</optgroup>
<optgroup label="Others">
<option>Honda</option>
<option>Ford</option>
<option>Toyota</option>
</optgroup>
</select>
For multiple values in option tag use below code
<option value="{'num_sequence':[0,1,2,3]}">Option one</option>
<option value="{'foo':'bar','one':'two'}">Option two</option>
First one is using array and second one is using Object.
Refer this for more info.
You should do like this
create a Table with Car names and its type like
Luxury,Sedan,etc.
Allow users to select cars based on types or car name.(dont combine
both)
Then when user select Cars by type you need to get cars from first
table corresponding to that class name