Kendo 使用 ng-options 而不是 DataSource 的下拉菜单

Question

我有一个使用 angular 定义的下拉列表，如下所示：

<select class="form-control"
        ng-model="controller.selectedUser.superiorId"
        ng-options="superior.userId as superior.lastName + ' ' + superior.firstName for superior in controller.superiors | orderBy:['lastName', 'firstName']"></select>

这很好用，但是我想在条目旁边显示一个小图像，所以我试图将其转换为 Kendo 下拉列表，您可以在其中定义 HTML模板（如 this）。

我想继续使用简洁的 ng-options 语法，而不是使用感觉有点笨拙的 Kendo DataSource 恕我直言。当我更新控制器中的上级数组时，我确实需要刷新下拉列表，但我似乎无法让它工作。我已经尝试过 ng-options、k-ng-options（按照建议 here），但我得到的只是一个空的下拉列表。

普遍缺乏信息（例如 7 个月没有回答 here）让我想知道这是否完全可行。

感谢任何帮助。

Answer 1

这是因为 kendo-drop-down-list 指令在 ng-options 有机会用下拉小部件需要的 <option> 元素填充它之前作用于元素。在具有 ng-repeat 元素的东西上使用 kendo 小部件时会出现同样的问题。

不幸的是，kendo 与 Angular 的集成在很多方面是不完整和老套的，所以半解决方法是 delay creating the dropdown until a controller variable is available, or rebuild the dropdown when a controller variable changes。

None 这些选项确实是最优的。当控制器变量发生变化时，第一个选项无助于刷新选项列表，并且重建小部件可能意味着失去 ng-model 绑定等。

这是他们选择用于与 Angular 集成的方法的局限性，其中之一并不值得大惊小怪地尝试破解。就跟着他们的 recommended approach of using data sources.

我也鼓励不要弄乱 select 元素，因为如今许多浏览器都对它们进行了本机处理，尤其是在移动设备上。

Kendo 使用 ng-options 而不是 DataSource 的下拉菜单

Kendo dropdown with ng-options instead of DataSource

javascript

html-select

kendo-ui

angularjs

angular-directive