javascript - Angular UI Bootstrap : how to add first option to select?

Question

我有以下选择架构:

首先:我有输入，它会过滤我选择的保管箱结果

第二:在我的结果中始终应该是选项，当我单击它时，我想看到模式窗口(因此，即使我输入一些文本，此选项仍然必须位于我的保管箱中)

第三...n:默认选项

现在我有这样的模板:

<ui-select ***mysecretoptions***>
  <ui-select-match ***mysecretoptions***>***mysecretoptions***</ui-select-match>

  <ui-select-choices***mysecretoptions***>
    <span ***mysecretoptions***></span>
  </ui-select-choices>
</ui-select>

它工作得很好，但是当我进行一些搜索时，第一个选项隐藏了......

是否可以做到，如何做？

第一个选项仅在我输入/单击 ui-select 时显示(因此它不会显示为整个选择框的选定值或默认值)

Answer 1

是的，有可能，我每天都会这样做，请检查以下内容:

<ui-select ng-model="view.provinceCode" title="Province">
    <ui-select-match placeholder="Select...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="x.code as x in view.provinces | filter: $select.search">
        <div ng-bind-html="x.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

正如您在 repeat 行中看到的，完成后，您可以使用对象数组的任何属性作为 ng-model 的值您可以手动设置所选项目。

// my controller (javascript)
view.provinceCode = 37;

这会将 ui-select 设置为您在 Controller 中建立的项目。

如果不使用x.property as x近似值，如果将模型设置为FULL对象，结果将是相同的:所选的ui-select 的属性将是您想要的属性。

编辑:

我刚刚意识到您要求放置数组的第一个元素，这在您的情况下更容易......

view.provinceCode = view.provinces[0].code;

或者，使用完整的对象...

view.selectedProvince = view.provinces[0];