如何使用AngularJS指定optionLabelTemplate Kendo UI DropDownList

我在通過KendoUI中的角度選項綁定在dropdownlist上使用optionLabelTemplate時遇到困難。如何使用AngularJS指定optionLabelTemplate Kendo UI DropDownList

版本：劍道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" 
    };

結果：出現任何選項標籤，第一個選項被自動選擇。

有人可以向我解釋爲什麼這不起作用，我怎麼能使它工作？

來源

2015-05-04 davmelmeggeo

很難說，但是你有一些事件可以檢查出來：'schema.parse'和'dataBound'來檢查小部件如何接收數據。 – DontVoteMeDown

如果我理解正確，您要做的是在第一次呈現下拉列表並且沒有選擇時顯示默認文本（「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決定了將被降呈現但是它仍然需要在那裏。最後，你也可以用你的optionLabel的價值在你的optionLabelTemplate像這樣的東西（雖然我想不出任何使用情況下，你可能需要做一些這種複雜的）：

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

來源

2015-05-04 14:47:46 Christina

這就是它！謝謝！我無法在文檔中找到這些非常有用的信息。所以希望這也能幫助其他人。更多的信息對於那些碰巧讀到這個並且和我一樣的人來說：我將tempate設置爲''，並且角度轉換模塊的工作效果非常好。 – davmelmeggeo

謝謝克里斯蒂娜。善良知道他們爲什麼沒有在API文檔中記錄這些。 – Brendan

在使用optionLabel和optionLabel模板玩了大約一個小時後，我幾乎放棄了。謝天謝地，我發現了這個帖子。根本不符合邏輯，您需要optionLabl才能使用optionLabelTemplate，以便可以忽略它。沒有一個理智的人會試圖獲得一個選項標籤模板的工作。謝謝！！！ – BradStell

如何使用AngularJS指定optionLabelTemplate Kendo UI DropDownList

回答

相關問題