如何使用AngularJS指定optionLabelTemplate Kendo UI DropDownList

我很难通过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"
    };

结果：
没有选项标签,自动选择第一个选项.

有人可以向我解释为什么这不起作用,我怎么能使它工作？

解决方法

如果我正确理解你要做的是在首次渲染下拉列表并且没有选择时显示默认文本(“SelectText …”).执行此操作的方法是使用optionLabel属性.您还可以使用已经使用的optionLabelTemplate来自定义选项标签的标记,但仅限于选项标签已存在.
因此,虽然这不起作用：

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

这样做：

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

请注意,在这种情况下,optionLabel将被忽略,因为optionLabelTemplate确定下拉列表将呈现的内容,但它仍然需要在那里.
最后,您还可以在optionLabelTemplate中使用optionLabel的值与此类似的东西(尽管我不能想到您可能需要执行此复杂操作的任何用例)：

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