如何使用 AngularJS 指定 optionLabelTemplate Kendo UI DropDownList

Question

我在通过 angular 选项绑定 KendoUI.

中使用下拉列表上的 optionLabelTemplate 时遇到困难

版本：Kendo UI v2015.1.430

标记：

         <select kendo-drop-down-list
                k-options="DropDownOptionsTest"></select>

脚本：

    var TestData = new kendo.data.ObservableArray([{value:"one", id:1}, {value:"two", id:2}]);
    $scope.DropDownOptionsTest = {
        dataSource: TestData,
        optionLabelTemplate: '<span>SelectText...</span>',
        dataTextField: "value",
        dataValueField: "id"
    };

结果：没有选项标签出现，第一个选项被自动选中。

有人可以向我解释为什么这不起作用以及我如何让它起作用吗？

Answer 1

如果我理解正确的话，您正在尝试做的是在首次呈现下拉列表且没有选择时显示默认文本 ("SelectText...")。这样做的方法是使用 optionLabel 属性。您还可以使用您已经在使用的 optionLabelTemplate 来自定义选项标签的标记 ，但前提是选项标签已经存在 。因此，虽然这不起作用：

$scope.DropDownOptionsTest = {
        dataSource: TestData,
        optionLabelTemplate: '<span>Select Text...</span>',
        dataTextField: "value",
        dataValueField: "id"
    };

这样做：

$scope.DropDownOptionsTest = {
        dataSource: TestData,
        optionLabel: 'Select Text...'
        optionLabelTemplate: '<span>Select Text...</span>',
        dataTextField: "value",
        dataValueField: "id"
    };

请注意，在这种情况下，optionLabel 将被忽略，因为 optionLabelTemplate 决定了下拉列表将呈现的内容，因此它仍然需要存在。最后，你也可以在你的 optionLabelTemplate 中使用你的 optionLabel 的值，就像这样（虽然我想不出任何你可能需要做这么复杂的事情的用例）：

$scope.DropDownOptionsTest = {
        dataSource: $scope.testData,
        optionLabel: 'Select one...',
        optionLabelTemplate: function(optionLabel){return '<span>' + optionLabel + '</span>'},
        dataTextField: "value",
        dataValueField: "id"
    };

如何使用 AngularJS 指定 optionLabelTemplate Kendo UI DropDownList

How to specify an optionLabelTemplate Kendo UI DropDownList with AngularJS

kendo-ui

angularjs