How to access UI-SELECT Dropdown value [AngularJS 1.4.7]

Question

I'm unable to access the selected dropdown value in UI-Select, How do I access the selected values in the controller?

<ui-select name="optionType" ng-model="optionType.selected" theme="bootstrap"  append-to-body="true" reset-search-input="true">
  <ui-select-match placeholder="Option">
    <span ng-bind-html="ctrl.trustAsHtml($select.selected.type)"></span>
  </ui-select-match>
  <ui-select-choices repeat="option in optionTypes | filter: $select.search" position="down">
    <span ng-bind-html="ctrl.trustAsHtml(option.type) | highlight: $select.search"></span>
  </ui-select-choices>
</ui-select>

Controller:

$scope.optionType = {};

$scope.optionTypes =
  [
    {type: "Risk Reversal"},
    {type: "Straddle"},
    {type: "Strangle"},
    {type: "Spread"},
    {type: "VANILLA"}
  ]

score 1 · Answer 1 · edited Oct 19 '17 at 06:51

1

Check their 'Object as source' example

You need to bind it to repeat like this:

<ui-select-choices repeat="item.type as item in optionTypes">

edited Oct 19 '17 at 06:51

Pankaj Parkar

134,766
23
234
299

answered Oct 19 '17 at 06:50

michal.jakubeczy

8,221
1
59
63

How do you access the selected values in the controller though? – Ash Rhazaly Oct 19 '17 at 09:02
through ng-model, there you get entire selected object – michal.jakubeczy Oct 19 '17 at 09:28
Do you have a working plunker? I'm getting undefined when I console.log("optionType.selected") – Ash Rhazaly Oct 19 '17 at 09:42
don't have any, but this is the official one and it's exactly your case - http://plnkr.co/edit/ePktG1p8QCf0DbIlM03m?p=preview – michal.jakubeczy Oct 19 '17 at 11:22

score 0 · Answer 2 · answered Oct 19 '17 at 06:58

There I don't see a need of using ng-bind-html by looking at your dropwon collection. Although if you need it there make sure you have trustAsHtml function, inside your controller $scope and then use trustAsHtml(selected.type) instead of ctrl.trustAsHtml(selected.type).

Without ng-bind-html

<ui-select name="optionType" ng-model="optionType.selected" theme="bootstrap" append-to-body="true" reset-search-input="true">
    <ui-select-match placeholder="Option">
      <span ng-bind="$select.selected.type"></span>
    </ui-select-match>
    <ui-select-choices repeat="option in optionTypes | filter: $select.search" position="down">
      <span ng-bind="option.type | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

Demo Here

How to access UI-SELECT Dropdown value [AngularJS 1.4.7]

2 Answers2