Setting value in select dropdown which is populating by ng-repeat - angularjs

I have an array as below:
hunting_lands = {"1":{"name":"forest and rivers"},"2":{"name":"safari"},"3":{"name":"sea"},"4":{"name":"Mountains"}}
I have a select dropdown where I use above json:
<select id="favourite_hunting_land">
<option value ="[[key]]" ng-repeat="(key, value) in hunting_lands">[[value.name]]</option>
</select>
Now I want to show a value selected for example sea:
For this what I tried:
I set hunting land dropdown menu ng-model = fav_hunting_land
$scope.$watch('fav_hunting_land', function() {
$scope.fav_hunting_land = 3;
});
But Then I had other onchange functions which is not working and neither does select dropdown works i.e I am unable to change values.
It worked and show 3 value selected.
All want is to show selected value in select dropdown which populates using ng-repeat.
Update
I am using [[]] for expressions using interpolate.


Use this instead in the HTML
<select id="favourite_hunting_land" ng-model="selectedItem">
<option value ="{{item.name}}" ng-repeat="item in hunting_lands">{{item.name}}</option>
</select> <br>
Value selected is {{selectedItem}}


Use expression
<select id="favourite_hunting_land">
<option value ="key" ng-repeat="(key, value) in hunting_lands">{{value.name}}</option>
</select>
EDIT:
You can set the inital value with ng-init
<select ng-init="selected='3'" ng-model="selected " ng-options="c.key as c.value for c in hunting_lands"></select>
DEMO

Related

angular ng-model is not working as expected

Template:
<select id="siteOptions" ng-model="siteVal" ng-change="siteChange()">
<option ng-repeat = "site in sites" ng-selected="{{site == selectedSite}}" value="site">{{site}}</option>
</select>
Controller:
$scope.siteChange = function(){
console.log(" $scope.siteVal--> "+ $scope.siteVal);
}
I could able to populate values in dropdown properly, but when I try to select value in dropdown I could see "$scope.siteVal--> undefined".
Even when I select the dropdown value multiple time ng-change is triggering only once.

Remove .value attribute from your html markup and your code would work fine!
<select id="siteOptions" ng-model="siteVal" ng-change="siteChange()">
<option ng-repeat = "site in sites" ng-selected="{{site == selectedSite}}">{{site}}</option>
</select>
From the DOCS
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected option
Here is the plunker which demonstrates the same

Display ng-model item.value as item.value.text inside select

I have the following select
<select ng-change="onChange(item)" ng-model="item.Probability" ng-options="item as item.text for item in Probability">
</select>
I can select from different items inside an array called Probability.
Probability:
$scope.Probability = [{text: '', value: },
The item is displayed to the user as item.text, but is saved in ng-model as just item (as you can see in my select)
When I want to edit this item (sometime after it is saved), I would like to display Probability.text as already chosen inside the select, but since the model is set to Probability (with .value and .text) my select is just blank.
How can I display item.Probability as item.Probability.text, and writing it like that inside the model did not work.

<select ng-change="onChange(item)" ng-model="item.Probability" ng-options="item.value as item.text for item in Probability">
<option value="">What's your probability</option>
</select>
in this way, $scope.item.Probability would equal to the item.value you select

This did not work:
<select ng-change="onChange(item)" ng-model="item.Probability" ng-options="item as item.text for item in Probability">
</select>
But this did:
<select ng-change="change(item, editable.ID)" ng-model="item.Probability" ng-options="item as item.text for item in Probability">
<option style="display:none" value="" disabled>{{item.Probability.text}}</option>
</select>
This will put an extra option ontop of my Probability options, this option is shown like 'item.probability.text', but doesn't have a value, hence it's disabled. But it shows the user what the value currently is.

How to set default option for select in angularjs

Now I am trying to set a default value for a select dropdown. but couldn't get it down, code:
<div class='paymentmethods subcontent' ng-switch on="editpaymentmethod">{{editselection.selectedmethod=Memethods[paymethodindex]}}// This gives me what I need,but select doesn't. confused?
<select ng-model='editselection.selectedmethod' ng-init="editselection.selectedmethod=Memethods[paymethodindex]" id='methods' ng-switch-when='Y'>
<option ng-repeat="method in Memethods" value="{{method}}">{{method}}</option>
</select>
<select ng-model='editselection.selectedmethod' ng-init="editselection.selectedmethod=companies[paymethodindex]" ng-switch-when='N' style='float:left'>
<option ng-repeat='companyoption in companies' value="{{companyoption}}">{{companyoption}}</option>
</select>
</div>
JS:
$scope.paymethodindex = $scope.Memethods.indexOf(paymethod);
console.log($scope.paymethodindex);
if(reimbursement=='N')
{
$scope.paymethodindex = $scope.companies.indexOf(paymethod);
}
I use paymethodindex to set default value for select dropdown. I can even print out in the page with {{editselection.selectedmethod=Memethods[paymethodindex]}}, I think the index part works fine, any idea?

Use ng-selected to default the selected option, see example in the doc.
Alternatively, use ng-options instead of ng-repeat to generate your options.

how to update dropdown value dynamically

I have html code like this
<select id="userGroups" name="userGroups" ng-model="userGroups" required class="form-control">
<option value="{{grp.groupId}}" ng-repeat="grp in groups">{{grp.groupName}}</option>
</select>
and in my controller I want to set the default value but its not working
function CreateUserController($scope, grpList) {
$scope.groups = grpList.groupList; //it is loading correctly and dropdown is populating correctly
$scope.userGroups = "2";
}
I am trying to set the userGroups value to 2, but its always showing the first option in select

The best bet here is to use ng-options:
<select ng-model="userGroups"
ng-options="group.groupId as group.groupName for group in groups">
</select>
Fiddle

Angularjs - Populate select box using ng-options

I have a json object as below
keyword = {
application: ["Athena","EWindow","EWS","FACT","FTP","Hardware","PEN","Hermes","Infrastructure","LNG Tracker","M2M","Maintenance","Microsite","Oracle","Platts.com","PMC","PTO Task","Sametime","Third Party Data","User Error","Vendor","Web Channels","XML-DD","Customer Request","Mark Logic","SBB","Market Engagement Form","Lotus Notes Database","Oracle11i","External News","Stringers","PRP","Kingsman","Hermes-1"],
incidentType: ["Publishing Failure","Brand Damage","Security Failure","Content Creation Failure","Internal failure","External Failure","System Failure","Operational Failure","Editorial Failure","Content inaccuracy","Process Failure","Application Issue","Infrastructure Issue","User Issue","Other","Resend","Data Send validation","Customer issue"],
incidentEnvironment: ["Production","Non-Production","Others"],
incidentPriority: ["Low","Medium","High","Critical"],
incidentLocation: ["Asia Pacific","Europe","New York","New Jersey","Houston","Washington DC","Others"],
incidentStatus: ["Initiation","Work In Progress","Completed","On Hold","Closed","Cancelled"],
incidentCategory: ["ActiveX","Checkin","Checkout","CKEditor","Corrupt Story","Delete Story","Delivering Content","Download-Upload","Filter","Graph-Rich Media","IE Cache","IE Setting","Indicia","InDesign","Infrastructure","Ingest(Table)","Other","PDF","Publish","Search","Table","User Issue"],
incidentTicketTools: ["BMC Remedy"],
}
<div class="col-lg-3">
<select name="txt_inc_Status" class="form-control input-sm" required>
<option selected disabled>
-- Select Status --
</option>
<option ng-repeat="incidentStatus in keywords.incidentStatus" value="{{incidentStatus}}">
{{incidentStatus}}
</option>
</select>
</div>
I need to populate these values in select boxes. Ex: Keywords.application in application select box and so on.
Earlier I used ng-repeat to construct options. But I came to know that it is not advised to do so.
So I am trying to use ng-option but facing difficulties in populating this. Can somebody help me on this?
Also I need to select a default value (random) for these selectbox. How can that be achieved. It didn't work when I used ng-repeat

You can use
<div ng-repeat="(key, value) in keywords">
<select ng-options="item for item in value" ng-init="index = getRandomIndex(value)" ng-model="value[index]">{{item}}</select>
</div>
together with a function to get the random index for current array
$scope.getRandomIndex = function(item){
var index = Math.floor((item.length * Math.random()));
return index;
}
DEMO

Resources