Angular UI 选择选项问题

Question

我正在尝试使用角度 UI 选择，但遇到了问题。当我的表单加载时，选项似乎正确填充，但它没有从我的模型中选择的值。例如，下面的屏幕截图显示了一个具有优先级 (2) 正常选择的项目，但正如您所见，当表单加载时它似乎是空的。

然后，如果我选择其中一个选项并保存它会尝试使用整个对象

{"text":"(2) Normal","value":"(2) Normal"} 

而不仅仅是值，但顶部仍然显示为空。

<ui-select ng-model="currentItem.PriorityValue" theme="bootstrap" style="min-width: 300px;" title="Choose a priority">
    <ui-select-match>{{$select.currentItem.PriorityValue}}</ui-select-match>
    <ui-select-choices repeat="option in (data.priority.options |  filter: $select.search) track by option.value">
        <span ng-bind="option.text"></span>
    </ui-select-choices>
</ui-select>

编辑：如果它有帮助，这就是我之前所做的工作，但现在我需要选择的过滤功能

<select class="form-control modal-input" id="PriorityValueInput" data-ng-options="option.value as option.text for option in data.priority.options" data-ng-model="currentItem.PriorityValue"></select>

Answer 1

我尝试在下面的 plunker 中做同样的事情。希望这会对你有所帮助。

http://plnkr.co/edit/BQuiDDULwVJgRRzlRx4x?p=preview

<ui-select ng-model="ctrl.country.selected" theme="selectize" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a country">
<ui-select-match placeholder="Select ">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in ctrl.countries | filter: $select.search">
  <span ng-bind-html="country.name | highlight: $select.search"></span>
  <small ng-bind-html="country.code | highlight: $select.search"></small>
</ui-select-choices>

并在控制器中选择页面加载选项

me.country.selected = {"name":"Albania","code":"AL"};

Answer 2

我也遇到了和你一样的问题，所以我也想分享我的解决方案，所以我认为这是你的数据结构是 lst。我了解您仅存储或从数据库中获取值，因此我添加了过滤器以根据值 从 lst 获取对象（ 2) Normal 并将其分配给 option.PriorityValue

  var lst = [
    {"text":"(1) High","value":"(1) High"}, 
    {"text":"(2) Normal","value":"(2) Normal"}, 
    {"text":"(3) Low","value":"(3) Low"} 
  ];
  $scope.data = {
      priority: {
        options: lst
      }
  };
  //You can change the value '(2) Normal'
  var newTemp = $filter("filter")(lst, {"value":'(2) Normal'});
  $scope.option = {
     PriorityValue: newTemp[0]
  }

这是标记，如果您只想在选择下拉列表时获取值，请使用 option.PriorityValue.value

  <ui-select ng-model="option.PriorityValue" theme="selectize" style="width: 300px;" title="Choose a priority">
      <ui-select-match placeholder="Select priority in the list...">{{$select.selected.value}}</ui-select-match>
      <ui-select-choices repeat="option in (data.priority.options |  filter: $select.search) track by option.value">
          <span ng-bind-html="option.text | highlight: $select.search"></span>
          <small ng-bind-html="option.value | highlight: $select.search"></small>
      </ui-select-choices>
  </ui-select>

这是我为你做的：

http://plnkr.co/edit/IIjSaHOHgzE9l2JV3b1Q?p=preview

对不起我的英语。