I have a list of strings with years on it, like:
$scope.years = ["2001", "2002", "2003", ...];
I'm trying to render it on a page inside a select tag, but angular keeps breaking the code, rendering the elements outside the tag.
I have the following in the page:
<select>
<option value="" disabled selected>----</option>
<option ng-repeat="y in years" value="{!y!}">{!y!}</option>
</select>
I does render, but all the option tags that are generated, are outside the select tag. Am I doing something wrong here?
Edit: using AngularJS 1.5.3
You can use ng-options, which is the recommended way in AngularJS, and has a lot of performance improvements over ng-repeat for this case.
It will require you to have ng-model as well. And you can still have your custom "Empty/Select" option.
It will look like this:
<select ng-model="something" name="S"
ng-options="y for y in years">
<option value="" disabled selected>----</option>
</select>
A full working example:
var app = angular.module("TestApp", []).controller("sample", ["$scope",
function($scope) {
$scope.years = ["2001", "2002", "2003"];
}
]);
angular.bootstrap(document, ["TestApp"]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-controller="sample">
<select ng-model="something" name="S" ng-options="y for y in years">
<option value="" disabled selected>----</option>
</select>
</div>
P.S.
I'm assuming the ! in your code is by mistake, if not, you cannot do this transformation in HTML. You better have another array with the formatted results, and watch the original array to update the transformation one.
Use ng-options instead
documentation: https://docs.angularjs.org/api/ng/directive/ngOptions
sample plnkr for you here: https://plnkr.co/edit/tuKBJsxLxdUKcsRvWvax?p=preview
<select ng-model="selectedValue" ng-options="item for item in years"></select>
Related
I am using angular js ui select plugin for my drop down. this is the code
HTML
<div class="col-sm-8 categoryWrapper">
<select ui-select2="{minimumResultsForSearch:10}" ng-model="screenList.approvalGrp"
multiple data-placeholder="*Category" class="form-control" id="category" required
ng-init="loadApprovalGroups()" ng-options="group.groupName for group in groupList">
<option value=""></option>
</select>
{{screenList.approvalGrp}}
</div>
this is the browser view. i prited it. please check this screen shot
I need to load model values as the selected values.
this is the view that i exactly want
how i do this correctly ?
You need to reassign your values to the model.
$scope.screenList.approvalGrp = screenList.approvalGrp //[{item1}, {item2}]
The majority of select / option solutions for Angular 2 work in a way that we return the actual content, not the value attribute. However, since I'm still learning Angular 2, I want to get the actual value attribute on clicking a button. I managed to somewhat solve this issue, but I'm not sure if this is the correct approach.
Below is the example of how I'd like it to work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the selected category.name, not the value attribute. */
The solution above creates the following HTML (note the lack of value attribute on option):
<select _ngcontent-oom-3="">
<!--template bindings={}-->
<option _ngcontent-oom-3="">stuff 1</option>
<option _ngcontent-oom-3="">stuff 2</option>
<option _ngcontent-oom-3="">stuff 3</option>
</select>
The solution below actually works, however, I need an ngModel in order to make it work.
<select [(ngModel)]="selectedCategory">
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */
What is the correct way to approach this situation?
Thank you for your suggestions.
As discussed in the comments, the "how I'd like it to work" example does work:
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>
Plunker
However, we must use beta.15 for this to work. See the changelog for beta.15 for more info:
select: set value individually from ngModel (e1e44a9), closes #7975 #7978
I prefer this approach since it does not add a property to the component, nor do we need to use a <form> tag (like in #Thierry's answer).
You could use a control defined inline with the ngControl directive:
<form>
<select #categoriesCtrl="ngForm" ngControl="categoriesCtrl">
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(categoriesCtrl.value)">
</form>
See this plunkr: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview.
you could do using change event call
<form>
<select #categoriesCtrl (change)='SelectedValue = categoriesCtrl.value'>
<option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect()">Get value</button>
</form>
Working Example https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview
I can set a dropdown list with default value in angularjs as,
<select name="repeatSelect" id="repeatSelect" ng-model="repeatSelect" ng-init=" repeatSelect = data[0].id">
<option ng-repeat="option in data" value="{{option.id}}">{{option.name}}</option>
</select>
How can I achieve the same using ng-options? I treid with,
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = option.id"
ng-options="option.name for option in data track by option.id">
</select>
But no use. Sample fiddle is here
Use ng-init to set default value for ng-options.
Here is the: demo
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0].id"
ng-options="option.id as option.name for option in data">
</select>
All this miss use of ng-init.
From the angular docs:
This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.
Source docs
In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options, angular does the rest.
Essentially when you define the $scope property your select will bind to assign it the default value from your data array. If your data array is from an ajax request, just assign it once you have the data.
.controller('test', ['$scope', function ($scope) {
$scope.data = [{name: 'one', id: 1}, {name: 'two', id: 2},{name: 'three', id: 3}];
$scope.repeatSelect= $scope.data[0];
}]);
There is one caveat to note. If you employ the as key word in your expression you have to assign your ng-model with the actual property your telling it to select.
See full fiddle demoing both: http://jsfiddle.net/kb99gee8/
i have acheieved what you need using your code and ng-options like you mentioned, here is Working Fiddle
Full CODE
<div ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect">Angular select:</label>
<select name="repeatSelect"
id="repeatSelect"
ng-model="repeatSelect"
ng-init=" repeatSelect = data[0]"
ng-options="option.name for option in data track by option.id">
</select>
</form>
<br/> <tt>Selected value: {{repeatSelect.id}}</tt>
</div>
</div>
<br/>
I will suggest an example
HTML part
<select class="form-control" ng-model="data.selectedOption" required ng-options="option.name as option.name for option in venueNamelists" ng-change="getmediationRooms(data.selectedOption)"></select>
In my controller
$scope.data = {selectedOption: $scope.venueNamelists[i].name};
the model value should equal to the key,value pair in the venueNamelists.
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>
I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.
Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!