I have a search form where you can search for a hotel. It also asks for the number of Adults as a select box (I want it to default to 2).
To maintain state I have the search results saving as sessionStorage. I then want to pick this up and have the selected value of the number of adults that was set in the session.
Can anyone help? Can't find this anywhere.
If understand correctly for your select you will need to do something like this:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
In your angular controller you can set $scope.selected to value 2 so that will be the default. You can read more here
Please let me know if you have anymore questions.
Related
I have searched a lot for the issue which i am facing. I have just started learning Angular and stuck in this problem since 3 days and wasting my time to solve this.
i have roles listing array. i have added selected = true key value pair if that element is selected in the form.
[{"role_id":1,"name":"MANAGER","selected":true},"role_id":2,"name":"USER","selected":true},{"role_id":3,"name":"Developer"}]
i have added selected roles in $scope.selectedRoles variable from controller and used in ng-model this way i can get selected role in edit form
<select ng-model="selectedRoles" multiple ng-options="item.name for item in roles track by item.role_id" class="form-control" > </select>
but when i save edit or add then i dont get any value in controller nor ng-model bind the input which i give in select
if i change ng-model to selectedRoles to permission.roles then i could save or edit.
i want to do both task which is not happening.
i appreciate in advance if any help.
I have a dropdown select with grouped ng-options. The user should be able to dynamically change the naming of the group name in an input field. On change of the group name value the select directive is not being updated unless you make a new selection.
I fixed this with using track by group name, but now the select dropdown is broken. Note that the option you select is not the one that is actually selected.
Is there a way to have both dynamically updated group name and a working select?
<select ng-options="player.name group by player.team for player in players track by player.team" ng-model="systemType.tertiaryEquipment"></select>
Here's the jsfiddle : http://jsfiddle.net/07woeam8/2/
You have several options here, but there are trade-offs that you need to consider.
First, the thing that is messing up your selections is the track by expression, which shouldn't be player.team because you are not selecting teams. It should be either player.name or nothing at all. Keep in mind that tracking by player.name will make the groups in the select object to not be updated in real-time.
Second, if you want the groups in the option menu to change dynamically, you need to change the entire $scope.players object, and not just change a string value inside of it. For example, you can use angular.copy:
$scope.change = function() {
var copy = angular.copy($scope.players);
copy[0].team = 'betsdfhsk';
$scope.players = copy;
};
This presents the other trade-off you need to consider. Changing the object reference completely will also void your selected object if you didn't use track by player.name in the first option.
But here's a working fiddle.
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've got an ng-grid that I want to be able to search on particular columns. The user enters some text and chooses a column from a dropdown. My UX guy doesn't much fancy the search-field-in-every-column-header that ng-grid supports.
Here is my Plunker:
http://plnkr.co/edit/WofBDA6QQkCDcwDMznzf?p=preview
(I haven't bothered with the text field yet, just worried about the field picker so far)
I've got a method that grabs the field and displayName for each field and populates my select with options, but for some reason, it gives me an empty first option. I don't want an empty one - and certainly not if it's going to look like this:
<option value="? undefined:undefined ?"></option>
I want it to default to a field of my choice (in the plunker example, I want it to default to 'age')
I can't figure out why I'm getting an undefined option - unless it's because the control is being rendered by my getFilterFields() function BEFORE the colDefs are fully defined. I've tried various ways of delaying the getFilterFields()function - I played with init: gridInit parameter, but so far, no joy.
How can I assure that
1] my dropdown contains ONLY valid columns, and
2] one of them is preselected?
It's better to use ng-options and set the model to the option that you want to be selected.
<select ng-model="selectedItem"
ng-options="item.value as item.name for item in filterOptions.filterFields">
</select>
and in the controller, set:
$scope.selectedItem = "age"; // equal to the value of the default option