Angular + Kendo：下拉列表的默认占位符

Posted 2023-05-07

【中文标题】Angular + Kendo：下拉列表的默认占位符

【英文标题】：Angular + Kendo: Default placeholder for drop down list

【发布时间】：2014-10-27 06:57:19

【问题描述】：

我想知道如何在 kendo ui + angular 中为下拉列表设置占位符。

目前我有：

模板

<select kendo-drop-down-list ng-model="selectedElement" k-options="options" >
</select>

控制器

...
$scope.options = 
        dataTextField: 'label',
        dataValueField: 'id',
        dataSource: 
            data: [
                
                    "label": "Please Select..."
                ,
                
                    "id": "linear",
                    "label": "Sample Linear"
                ,
                
                    "id": "bar",
                    "label": "Sample Bar"
                
            ]
        
    ;
...

如果我用后端调用替换数据源，我不能在那里有“请选择”。有没有其他方法可以解决这个问题？

我尝试按照link 中的说明使用 data-option-label="Please Select"，但没有成功。

【问题讨论】：

不确定是否是同一个问题，但您可以尝试输入而不是选择：***.com/a/23029167/2001735

我也试过了，但没有解决。

那个人正在使用 kendo-combo-box，这是一个不同的指令，但无论如何都要感谢...

【参考方案1】：

好吧，您可以将其定义为 data 属性 (more information here)

模板

<select kendo-drop-down-list k-option-label="'item1'" ng-model="selectedElement" k-options="options" >
</select>

或在 $scope 中设置optionLabel 选项

控制器

...
$scope.options = 
    optionLabel: "Item...",
    dataTextField: 'label',
    dataValueField: 'id',
    dataSource: 
        data: [
            
                "label": "Please Select..."
            ,
            
                "id": "linear",
                "label": "Sample Linear"
            ,
            
                "id": "bar",
                "label": "Sample Bar"
            
        ]
    
;

...

【讨论】：

k-option-label="item1" 是错误的，因为 option-label 是一个字符串，所以你需要像 k-option-label="'item1'" 一样在它周围添加 '

@GeorgeK：你知道如何动态改变optionLabel吗？我试过 $scope.options.optionLabel = 'new display...'。用户界面没有更新

您将需要使用 k-rebind*。这是一个演示 dojo.telerik.com/ipuzo * - docs.telerik.com/kendo-ui/AngularJS/…

的演示