Angular set disabled option selected

Question

Have the next selector:

<select
      ng-model="vm.selectedUserState"
      ng-options="u as u.Group disable when u.Obsolete for u in vm.UserStates">
</select>

when page is loaded and current status code disabled (Obsolete is true), i see empty selection, how i can fix this (pre-select an appropriate option even when an item is disabled)

so you can write? u as u.Group for u in vm.UserStates track by u.Obsolete=false — Saahon
– Saahon, Commented Feb 3, 2016 at 12:46
or like this: <select ng-model="vm.selectedUserState" ng-options="u as u.Group for u in vm.UserStates" ng-if="u.Obsolete"> </select> — Saahon
– Saahon, Commented Feb 3, 2016 at 12:48
@Saahon the code you've provided not work (using the second listing select does not appear at all) — martavoi
– martavoi, Commented Feb 3, 2016 at 14:05

Martijn Welker · Accepted Answer · 2016-02-03 12:50:33Z

1

Your ng-model is probably undefined on load, if you want an initial selected item set your ng-model in your controller

vm.selectedUserState = vm.UserStates[selectionKeyName]

update: Looking at the Angular source I don't think it's possible:

if (option && !option.disabled) { //Skips if it's disabled <----
  if (selectElement[0].value !== option.selectValue) {
    removeUnknownOption();
    removeEmptyOption();

    selectElement[0].value = option.selectValue;
    option.element.selected = true;
    option.element.setAttribute('selected', 'selected');
  }
} else {
  if (value === null || providedEmptyOption) {
    removeUnknownOption();
    renderEmptyOption();
  } else {
    removeEmptyOption();
    renderUnknownOption();
  }
}

edited Feb 3, 2016 at 12:50

answered Feb 3, 2016 at 12:38

Martijn Welker

5,6151 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

martavoi Over a year ago

no, im sure vm completely defined (if vm.selectedUserState is not obsolete (no disabled) all works properly)

martavoi · Accepted Answer · 2016-02-03 13:46:38Z

0

Solved adding an addition check

<select
      ng-model="vm.selectedUserState"
      ng-options="u as u.Group disable when (u.Obsolete && vm.selectedUserState.Code !== u.Code) for u in vm.UserStates">
</select>

answered Feb 3, 2016 at 13:46

martavoi

7,1027 gold badges43 silver badges62 bronze badges

Collectives™ on Stack Overflow

Angular set disabled option selected

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related