如何访问 UI-SELECT 下拉值 [AngularJS 1.4.7]答案

【问题标题】：How to access UI-SELECT Dropdown value [AngularJS 1.4.7]如何访问 UI-SELECT 下拉值 [AngularJS 1.4.7]
【发布时间】：2017-10-19 06:38:31
【问题描述】：

我无法在 UI-Select 中访问选定的下拉值，如何访问控制器中的选定值？

<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>

控制器：

$scope.optionType = {};

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

【问题讨论】：

标签： javascript angularjs ui-select angular-ui-select

【解决方案1】：

检查他们的“对象作为源”example

你需要像这样绑定它重复：

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

【讨论】：

你如何访问控制器中的选定值？
通过 ng-model 得到整个选中的对象
你有一个工作的plunker吗？当我 console.log("optionType.selected")
没有，但这是官方的，这正是你的情况 - plnkr.co/edit/ePktG1p8QCf0DbIlM03m?p=preview

【解决方案2】：

通过查看您的 dropwon 收藏，我认为不需要使用 ng-bind-html。虽然如果你需要它，请确保你有trustAsHtml 函数，在你的控制器内部$scope 然后使用trustAsHtml(selected.type) 而不是ctrl.trustAsHtml(selected.type)。

没有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

【讨论】：