带有虚拟化和设置索引的Kendo组合框

时间:2015-11-13 14:27:08

标签: angularjs kendo-ui

组合框没有用k-index绑定数据。

我已将索引设为0(零),因为我想将第一项设置为默认值。

我在plunker中已经证明了这个问题。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />
          <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    </head>
    <body>
    <div ng-app="KendoDemos">
        <div ng-controller="MyCtrl">
                <select kendo-combo-box
                        k-placeholder="'Select product'"
                        k-data-text-field="'ProductName'"
                        k-data-value-field="'ProductID'"
                        k-filter="'contains'"
                        k-ng-model="selectedProduct"
                        k-index="0"
                        k-data-source="productsDataSource"
                        k-cascade="productsOnCascade"
                        k-on-change="productsOnChange(event)"
                        k-virtual="productsVirtualOptions"
                        k-height="200">
                </select>
        </div> 
    </div>
        <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
      <script src="app.js"></script>
    </body>
</html>

1 个答案:

答案 0 :(得分:3)

你可以稍微减少你的html并不包括所有这些选项,而是使用k-options来指定你的数据源,事件和其他选项。 IMO更容易管理。

<select kendo-combo-box
    k-filter="'contains'"
    k-ng-model="vm.selectedProduct"
    k-options="vm.productsOptions">
  </select>

  vm.productsOptions = {
    dataSource: productsDataSource,
    virtualOptions: productsVirtualOptions,
    onCascade: productsOnCascade,
    onChange: productsOnChange,
    index: 0,
    height:200,
    dataTextField: "ProductName",
    dataValueField: "ProductID",
  };

您在正确的路径上,但下拉列表的ng-model设置为空字符串,与您在组合框文本/值字段中设置的实际属性无关。如果将ng-model初始化为null,则会设置指定它的正确索引。

看看这个plunker,看看它是否对你有帮助。