Setting Default in the Dropdown

Question

I am trying to set a default in to the below drop down

<div hidden id="projectSelected">
    <label style="font-size: medium">Project *</label>
    <select name="projectSelected" id="projectSelectedId" class="form-control" 
        ng-model="request.projectSelectedBarcode" required>
        <option ng-repeat="prj in projectList" value="{{prj.Barcode}}">{{ prj.Name }}</option>
    </select>
    <div style="color:maroon" ng-messages="getServiceReuqestForm.projectSelected.$error"
        ng-if="getServiceReuqestForm.projectSelected.$touched">
        <div ng-message="required">This field is required</div>
    </div>
</div>

Here projectList is the data returned from the Odata call. Is it possible that I can have one of the returned values as default in to my dropdown.

You should use ng-options directive, see this https://stackoverflow.com/questions/18194255/how-to-have-a-default-option-in-angular-js-select-box — Nikola Kirincic, Apr 18 '18 at 18:37
@niklaz I am new to Angular. Should I be using them along with the ng-repeat? — trx, Apr 18 '18 at 18:39
Possible duplicate: https://stackoverflow.com/questions/30088227/angularjs-set-default-value-on-select-inside-a-ng-repeat — levininja, Apr 18 '18 at 18:43
@levininja I dont have the control over the list of values from the dropdown as it is the data returned from a Odata Web service. — trx, Apr 18 '18 at 18:46
@trx, you don't need to use ng-repeat, since ng-options directive uses is internally. Check docs https://docs.angularjs.org/api/ng/directive/ngOptions — Nikola Kirincic, Apr 18 '18 at 20:07

score 0 · Answer 1 · answered Apr 19 '18 at 07:54

What you could do is set your select's ng-model to be one of the Barcode from your Odata values.

Say that after the Odata call you have something like this :

$scope.projectList=[
{
    "Name":"project 1",
  "Barcode":"barcode 1"
},
{
    "Name":"project 2",
  "Barcode":"barcode 2"
},
{
    "Name":"project 3",
  "Barcode":"barcode 3"
}];

Then you just have to do something like this :

  $scope.request={
   "projectSelectedBarcode":$scope.projectList[2].Barcode
  }

And that should set your <select>

You can have a look at this JsFiddle: https://jsfiddle.net/Freego/p7g2d08g/1/

Hope this helps !

Setting Default in the Dropdown

1 Answers1