如何使用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"
    };