I have the following code:
<select ng-model="sortYear">
<option value="all">All Years</option>
<option ng-repeat="article in news | orderObjectBy:'year':true | unique: 'year'" value="{{article.year}}">{{article.year}}</option>
</select>
Which works perfectly. I've even got sortYear bound at a different point on the page, and it's connected fine, etc.
My problem is, when I get to the page, I want the default, prechosen selection to be the top actual year, not "All Years". I've tried a couple things:
1) I set $scope.sortYear in my controller. I know it's setting it since the bound sortYear later in the page is showing up just fine on the initial load.
2) I tried using ng-init to set it to a year explicitly, as well as tried the ng-init="sortYear = getCurYear()" where I defined a function getCurYear in the controller (and verified that I was actually hitting that function and setting/returning what I thought I should be) but nada.
What am I missing?
use ng-value in option tag with ng-repeat like
<option ng-value="article.year" ng-repeat="article in news | orderObjectBy:'year':true | unique: 'year'">{{article.year}}</option>
Related
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
<select ng-model="vm.pageNumber" ng-change="someFunction()">
<option ng-repeat="page in vm.pagesIds" ng-value="page">
Page {{page}}
</option>
</select>
So, pageNumber is a number of current page (1). pagesIds is an array of pages' ([1,2,3])numbers. I cant get it, why on page refresh it doesn't select page? All the functionality is working, pages are being changed, but unfortunately select's selected field is always empty. I've tried using ng-value='page' and value={{page}} but still doesn't work.
Even initial vm.pageNumber = 1 is not showing, select has empty field, though dropdown contains all the options.
Any tips, please?
UPDATE:
When I try to ng-selected='vm.pageNumber == page' it works only for last option 3.
Well, somehow same stuff works for Angular Material's md-select. Not the proper solution, but it works. https://material.angularjs.org/latest/api/directive/mdSelect
<select ng-model="vm.pageNumber" ng-options="page as page for page in vm.pageIds" ng-change="someFunction()"></select>
Setting your vm.pageNumber will set the drop down value.
We are attempting to resolve a maddening bug in IE 10 in which the option label of the selected option does not get rendered for an Angular <select>. Instead, the label of the option appears as {{option}}, implying that the directive could not be resolved. What is worse is that this problem does not happen in IE 11 or later, or Chrome. Here is the relevant code:
The HTML:
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" value="{{option}}">{{option}}</option>
</select>
In the controller JS code we define frequency as a static array, since the choices will never change:
$scope.frequency = ["Never","Daily","Weekly","Monthly"];
The scoped variable used for the model is configurations.LOCATION_UPDATE_FREQUENCY, and is defined using a value from the database. Persisting to the database works on IE 10 and other browsers, which means that binding from the UI to the server appears to be working without issue.
What is really strange about this bug is that the correct option still gets selected in IE 10, but the label is broken or not being rendered properly.
Here is a screen capture to further illustrate the problem:
According to offical documentation you should use "ng-value"
https://docs.angularjs.org/api/ng/directive/ngValue
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" ng-value="{{option}}">{{option}} </option>
</select>
I have different <select> in a ng-repeat div.
What I want is to avoid users select several times a same option.
I used the filter like this :
<div ng-repeat="customer in datas.customers">
<select ng-model="customer.attributeId" ng-change="updateCustomer(customer)">
<option ng-repeat="attribute in datas.attributes | filter:filterByAttributeNotUsed(customer)" value="{{attribute.id}}">{{attribute.name}}</option>
</select>
</div>
The filter works like I want (I tested it separately). But the result is not good.
When the filter is active, options in different select have to show only "free" attributes (it means, attributes which are not yet selected).
Here is a Demo which is more explicit I suppose.
I use the ngOptions directive in the HTML given below:
<select ng-model="selectedGroupToShow.Id" ng-options="g.Id as g.Name for g in myGroups">
<option value>-- All --</option>
</select>
The filter I am using in ng-repeat to show my data goes like this:
filter:{GroupId:selectedGroupToShow.Id}"
Even if I use
filter:selectedGroupToShow
the issue stays the same.Resetting the filter..
This works perfectly, but when I want to clear the filter (select default option - 'All') it will only show data that doesn't have GroupId parameter set at all.
How can I show ALL the data (clear the filter) when choosing default option element within select?
I think I understand your problem and the issue you are facing is when dropdown selected to --ALL-- its value is null and not undefined.
So to reset it you have to set it for undefined.
<div ng-repeat="item in items| filter:{itemId:selectedGroupToShow.Id||undefined}">
{{item.itemId}}
</div>
Please refer the below fiddle I have created for your problem.
fiddle
I did it this way, just with an empty String value.
Hope it could help anyone.
JADE code:
select.form-control(ng-model="productType", ng-init="productType='free'")
option(value="free") FREE
option(value="interest") INTEREST
option(value="hybrid") HYBRID
option(value="") ALL
.col-sm-6.col-md-4.col-lg-3(ng-repeat="product in productList | filter:{ type :productType }") {{product.name}}