<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.
Related
So I have a select box which populates some values into the dropdown using ng-options So I want to show the error messages as soon as the user click on the dropdown and focus out without making a selection.
JS Code
$scope.someMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
];
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in someMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
So it is working in a case where I add a blank option like option value="" selected hidden/> </select> and select some valid value and then select the blank option again, it gives error message as Required field.
But as you can see, the above selectbox will be blank once the page loads, so if use click on the dropdown and focus out without selecting or move to other field without selecting any value it should give error as Required field.
now if I try to iterate through the value of form.inpName.$error is never having any value and i cannot validate it using the above technique.
I have tried ng-show , ng-if , message expression may be am lacking some expertise.All of them works after selecting valid entry from dropdown and then moving back to blank option.
Solutions which would not work for me
Check model value:I do not want to go to model for these types of field and check if they are blank then show some error message, rather I want to iterate through the $error array and find the issue with the field
Make the default option selected when page loads- Cannot do it.
Add a field as selected one options : This will also not work because if the user did not touch the selection at all and filled all other fields the $error will not be populated for this select dropdown.
Any help would be much appreciated, really struck on this one.
As helped by #Ininiv in above post the code i posted works fine in plunker but not in my dev environment.
So based on some POJO/Entity out objects gets formatted with properties as null.So when i select and the option populates angular does not see as a change in the model, unless i select a value from dropdown and select a blank option from dropdown again. It gets activated.
But I wanted it to start working from the first touch itself, if left blank the error message should pop up.
To tackle this the ngModel needed to be set to null, when the dropdown the $error thing is activated and If i leave it blank and move to other field the error shows up.
So basically on the change of model only the ngMessages directive get activated which was not happening for dropdowns which were populating based on some object properties.
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
I have a select list which is rendered via an ng-repeater and on change it fires the value of the selected option into a function this works as expected.
The issue I am now stuck on is if the page is loaded with a specific option requested how I ensure that select option is highlighted.
I have it so the GUID which is the value of the select is automatically fired to the function to get the page data for the selected item so that's working the issue is highlighting the selected item in the select list to show the user its related to that selection.
My code is below but you will see that I am binding it to ng-model="asCtrl.accSelected" which passed the GUID value. My assumption was that when a predefined GUID is requested I can set vm.accSelected to be equal to the GUID value and that should due to the 2 way binding show the selection on the select list but this doesn't seem to be the case.
<div data-ng-controller="tpAccStatusCtrl as asCtrl">
<select class="form-control" ng-model="asCtrl.accSelected" ng-change="asCtrl.retrieveAccount(asCtrl.accSelected)">
<option value="select" selected="selected">Select an Account</option>
<option ng-repeat="acc in asCtrl.accounts" value="{{acc.UniqueIdentifier}}">{{acc.AccountName}}</option>
</select>
</div>
I hope the above makes sense and someone can show me how to ensure the select list reflects the value set for vm.accSelected
Call the asCtrl.retrieveAccount(asCtrl.accSelected) function manually on page load. Ng-change will only trigger if the value is changed by the input, if I'm not mistaken.
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>
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}}