I have two select fields, one for Month and one for Day (controller as name is 'contactDetails'):
<select
data-ng-model="contactDetails.contactBasicInfo.bdmonth"
data-ng-options="bdMonth.key as bdMonth.value for bdMonth in contactDetails.months">
<option value="">Month</option>
</select>
<select
data-ng-model="contactDetails.contactBasicInfo.bdday"
data-ng-options="bdDay.key as bdDay.value for bdDay in contactDetails.days">
<option value="">Day</option>
</select>
That output the selects just fine and I can use them to save information to the database. No problems there.
The issue is when I pull the info back out of the database and want the select fields to update to reflect the values pulled from the database. They don't. If I hard-code the values into the controller, they'll update, but not if the values are assigned after an $http call.
I have this at the top of the controller to set up the defaults:
ctrl.contactBasicInfo.bdmonth = 0;
ctrl.contactBasicInfo.bdday = 0;
And later I call a function that then assigns values to those two variables:
ctrl.contactBasicInfo = data.contactInfo.contactBasicInfo;
All other data that comes out of data.contactInfo.contactBasicInfo works and the fields update, like firstName, phone, email, etc. If I place the models in the html like {{ctrl.contactBasicInfo.bdmonth}}, it will show the correct values. So, I know the values are coming back correctly from the $http call. The selects just don't change to reflect the new values.
Any ideas what I am missing?
Thanks!
It's because the directive ngModel for a <select> element uses the === comparison when binding. Hence 0 === '0' will return false. So you should assign a string not a number/integer to your ngModel attached to the dropdown.
Related
I'm working on angularjs app, and I can't find the answer for simple question. I've got an select with ng-options, when array that is set for options has more then one object inside the select is empty on start, but when array has only one element it automatically set it as default value. I need this select to be empty at the begining all the time, is there any solution?
in angularJS you may separate the variable used to fill in your options values and the model that stores your selected value.
See that example :
//Model used to store selected values
<select class="form-control" ng-model="myModel.country">
//I have a $scope.countries array of country
<option ng-repeat="country in countries" ng-value="country" required>{{country.name}}</option>
</select>
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 a lot of select boxes in my application, being generated by lists of data and assigned to various ng-models.
I want to set the ng-model value to the first available option (respecting filters) of all select inputs globally in the app.
So for example a select input like this:
<select ng-model="entry.employee">
<option ng-value="employee.name" ng-repeat="employee in employees | filter:active">{{employee.name}}</option>
</select>
The entry.employee ng-model defaults to null, I need every select box to never be null but always select the first valid option of a select input by default.
It needs to be global as well and be generic enough to work with any type of select input.
Here is the data:
$scope.employees= [
{'name':'Bill'},
{'name':'Frank'},
{'name':'Ted'},
];
Instead of using ng-repeat on option elements use directly ng-option on select tag.
for example
<select class="form-control" ng-options="item.name for item in employees track by item.id" ng-model="selectedItem"></select>
in you controller use:
$scope.selectedItem=$scope.employees[0];
your object would be like:
$scope.employees= [
{id:'1','name':'Bill'},
{id:'2','name':'Frank'},
{id:'3','name':'Ted'},
];
In this case let you select tags be 'n' numbers but whenever you want you ng-model to be the first one just initialize it with the first element in your Object.
Also there is a good thing using ng-option is whenever you want to change the value of the select element at runtime you just need to update the selectedItem element.
Hope this resolves your query
I generate a table using ng-repeat that loops over user submitted data. Inside of the ng-repeat I have a field, a select, that I use another ng-repeat to build a list of types. This too generates the appropriate select. However, I cannot figure out how to have the select defaulted to the users's value; e.g. User selects book as the type, when the user reloads the page I want the select to have "book" preselected.
<tr ng-repeat="item in userData" ng-include="'templates/bookmarkrow.html'"></tr>
...
<select ng-model="item.type" ng-options="option.name for option in typeOptions track by option.value" class="form-control hidden"></select>
I thought the ng-model would bind the select to the value of item.type. Any ideas?
Additional Details
typeOptions is an array of objects; e.g. [{'name': 'some name', 'value': 'some value', ...}]. As for the data, I'm aware that AngularJS doesn't store the data. Assume in this example that data is coming from a data store; be it database or local storage. The larger point is I will have loaded data in the client side and want to indicate it in the select.
Since angular does not persist data across page reloads the data will be lost when a full reload occurs. If you are using angular routes or ui-router then you can persist data in factories which are singletons.
To save data across page reloads you can (as mentioned) use local storage, cookies or store it the in the backend of your application.
To just initialize a value you can use ng-init
I rewrote my code to use ng-repeat on the option, instead of using ng-options on the select. After that I used ng-selected on the option to decide which option is selected.
<select class="form-control hidden">
<option selected-value="{{option.value}}" ng-selected="{{item.type == option.value}}" ng-repeat="option in typeOptions">{{option.name}}</option>
</select>
I'm using selects to allow a user to switch between events and years. Each change will pull appropriate data from the server, return and update the page. However, the select box goes from the selected value to an empty value. I've looked at numerous solutions and they aren't working.
<select
ng-model="eventName"
ng-options="item.value for item in eventOptions track by item.value"
ng-change="changeEvent(eventName.value)">
</select>
This is the changeEvent function:
$scope.changeEvent = function(eventName){
$scope.eventName = eventName; //wrongly assumed this would update the selected value
$scope.getData($scope.eventName,$scope.eventYear); //this returns the json - correct
$scope.updateSelected(); //meant to update the select field value on the page - fails
};
$scope.eventName or $scope.eventYear values will properly update on a change, but has no effect on the page. The selects just empty of a selected value.
UPDATED (with corrected code)
I wanted to post the changes I made more clearly than the comment allows.
I removed the object param "value" from the options and the argument from the function call (eventName.value).
<select
ng-model="eventName"
ng-options="item for item in eventOptions track by item"
ng-change="changeEvent()">
</select>
And the changeEvent function gets simplified to:
$scope.changeEvent = function(){
$scope.getData($scope.eventName,$scope.eventYear);
};
It all works as expected! Thanks to all, especially Delta who got me looking at it the right way.
So, your event name variable is set to be item. not item.value so instead of passing in changeEvent(eventName.value) try passing in changeEvent(eventName). either way the value you are passing into your method doesnt match the value of your model's variable
item.value for item in eventOptions track by item.value
so for this statement, you are saying make my options ng-model=item but make their value=item.value so they show what you want them to show but still have all the information you need from each one.
Upon further inspection is looks like you dont need:
$scope.eventName = eventName;
$scope.updateSelected();
Angular should be updating your eventName for you, you just need to call the change method.
I'm not sure you need:
ng-change="changeEvent(eventName.value)"
if you use ng-options the model will be updated in the scope automatically on selection. You could watch the value in the controller if you want to do other stuff when it changes:
$scope.$watch('eventName', function() {
//do stuff
});