How to preselect a specific element from dropdown using ng-repeat

Question

This is my html code:

<select id="selectFileType" ng-model="instance.fileType" required>
  <option ng-repeat="(key, value) in fileTypes" id="key" value="{{key}}">{{key}} ({{value}})</option>
</select>

I am using a map of items to fill the list with information - now I want to pre-select a specific element based on the key but all the solutions I found didn`t work.

E.g. I tried to use the id field to use something like: document.getElementById("A").selected = true;

Does someone have an idea what I should do?

Thanks and have a nice day

use ng-init="instance.fileType = 'some value from dropdown' " or in controller define $scope.instance.fileType= 'some value from dropdown' — Alaksandar Jesus Gene, Apr 04 '19 at 14:56
I already tried $scope.instance.fileType = "XLSX"; but this is not working as well. — HerTesla, Apr 04 '19 at 15:00
It works. Check https://jsfiddle.net/alaksandarjesus/zjr8cpdv/3/ — Alaksandar Jesus Gene, Apr 04 '19 at 15:12
Than I have a different error ... I will check and let you know. Thanks for the help! — HerTesla, Apr 04 '19 at 15:17

Damien · Answer 1 · 2019-04-04T15:09:22.637

Use the ng-selected directive to set your pre-selected option.

angular.module('myApp', [])
  .controller('ctrl', function($scope) {
    $scope.vm = {
      priceTypes: [{
          id: 3,
          name: 'pound'
        },
        {
          id: 5,
          name: 'Yen'
        },
        {
          id: 6,
          name: 'dollar'
        }
      ]
    };
    //select model value
    $scope.localModel = {
      priceType: $scope.vm.priceTypes[1]
    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="localModel.priceType">
  <option 
            ng-repeat="item in vm.priceTypes as item"
            ng-selected="localModel.priceType.id == item.id"
            value="{{item}}"
            >{{item.name}}</option>
</select>
  <div>
    priceType: {{ localModel.priceType }}
  </div>
</div>

How to preselect a specific element from dropdown using ng-repeat

1 Answers1