如何使用AngularJS指定optionLabelTemplate Kendo UI DropDownList

Question

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