Menu
I have a form that is used to edit a object and I can't select a value in the select box.
I have a json array which represents the to be edited and look like this:
$scope.item = [{ "objectID": "76", "versionID": "0", "versionName": "CURRENT", "objectName": "xyz", }] now I am at the same time populating a select box from another json array that looks like this:
$scope.versions = [ { "id": "0", "description": "CURRENT", "name": "CURRENT" }, { "id": "114", "description": "description of Version 2", "name": "version2" }, { "id": "126", "description": "description of Version 3", "name": "version3" }, { "id": "149", "description": "description of Version 4", "name": "version4" }] inside my webpage I am creating the select box as follows:
Version: <select ng-model="item.versionID" ng-selected="item.versionID" ng-options="version.name for version in versions" required> the select box is populating for me but it should be selecting the the value that matches the version in item. I have tried both versionID and versionName, I have even tried setting ng-selected="0" and that doesn't even work.
I have looked here on SO, the Angularjs site and googled and gone through countless tutorials but still having issues with this. I just can't seem to see what the issue is so any Help greatly appreciated
Added a JsFiddle here
475
The default value of the select element can be set by using the 'selected' attribute on the required option. This is a boolean attribute. The option that is having the 'selected' attribute will be displayed by default on the dropdown list.
In my opinion the correct way to set a default value is to simply pre-fill your ng-model property with the value selected from your ng-options , angular does the rest. Essentially when you define the $scope property your select will bind to assign it the default value from your data array.
AngularJS ng-selected Directive The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
The ngInit directive allows you to evaluate an expression in the current scope. This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit : aliasing special properties of ngRepeat , as seen in the demo below.
You can simple use ng-init like this
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
