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

【问题标题】：Kendo dropdown with ng-options instead of DataSource使用 ng-options 而不是 DataSource 的 Kendo 下拉菜单
【发布时间】：2015-06-03 15:09:03
【问题描述】：

我有一个使用 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）让我怀疑这是否应该是可能的。

感谢任何帮助。

【问题讨论】：

标签： javascript angularjs kendo-ui html-select angular-directive

【解决方案1】：

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

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

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

这是他们选择用于与 Angular 集成的方法的一个限制，其中之一是不值得大惊小怪地尝试破解。只需使用他们的recommended approach of using data sources。

我还建议不要弄乱选择元素，因为现在许多浏览器都对它们进行了原生处理，尤其是在移动设备上。

【讨论】：