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"}
  ]

Pankaj Parkar · Accepted Answer · 2017-10-19 06:51:39Z

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, 2017 at 6:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Oct 19, 2017 at 6:50

michal.jakubeczy

9,7771 gold badge71 silver badges84 bronze badges

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

4 Comments

Ash Rhazaly Over a year ago

How do you access the selected values in the controller though?

michal.jakubeczy Over a year ago

through ng-model, there you get entire selected object

Ash Rhazaly Over a year ago

Do you have a working plunker? I'm getting undefined when I console.log("optionType.selected")

michal.jakubeczy Over a year ago

don't have any, but this is the official one and it's exactly your case - plnkr.co/edit/ePktG1p8QCf0DbIlM03m?p=preview

Pankaj Parkar · Accepted Answer · 2017-10-19 06:58:49Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related