将 Kendo UI 网格数据源绑定到组合框答案

【问题标题】：Bind Kendo UI grid dataSource to combobox将 Kendo UI 网格数据源绑定到组合框
【发布时间】：2015-02-26 22:38:05
【问题描述】：

我有一个包含名称对象的 Kendo UI 网格，当我选择一行时，我想在下面填充一个表单。目前文本输入和日期选择器工作正常。但我的组合框只有一种方式绑定。我可以更改网格中的值，但是当我选择新行时，组合框的值不会改变。

HTML

<div id="nd-names-tab" ng-controller="nd-names-controller">
 <div id="nd-names-grid-section">
    <div id="nd-names-grid"
        kendo-grid="namesGrid"
        k-data-source="namesData"
        k-columns="nameGridColumns"
        k-selectable="true"
        k-reorderable="true"
        k-on-change="selectedName = data"
        k-toolbar="[
        { 'name': 'addName', template: '<button data-ng-click=\'addName()\' class=\'k-button\'>Add</button>' },
        { 'name': 'deleteName', template: '<button data-ng-click=\'deleteName()\' class=\'k-button\'>Delete</button>' }
        ]" >
    </div>                              
 </div>
 <div id="nd-names-input-section">
    <label>Name: <input type="text" class="k-textbox" ng-model="selectedName.lname"/></label>  
    <input type="text" class="k-textbox" ng-model="selectedName.fname" /> <br/>
    <label>DOB: <input id="datepicker" ng-model="selectedName.dob"/></label>  
    <label>Gender: <input id="gender" ng-model="selectedName.gender"/></label> <br />
    <label>Address: <input type="text" class="k-textbox" style="width: 200px" ng-model="selectedName.addr"/></label>
 </div>
</div>

JS 文件

    $("#datepicker").kendoDatePicker({
    format: "dd/MM/yyyy"
});

$("#gender").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Male", value: "Male" },
        { text: "Female", value: "Female" },
    ],
    filter: "contains",
    suggest: true
});

角度控制器

app.controller('nd-names-controller', function($scope){

$scope.namesData = new kendo.data.ObservableArray([
    { fname: 'Joe', lname: 'Clark', addr: '1565 Main Rd.', dob: '14/08/1990', gender: 'Male'},
    { fname: 'Bob', lname: 'Smith', addr: '123 Main St.', dob: '23/03/1992', gender: 'Male'},
    { fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
    { fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'},
    { fname: 'Jane', lname: 'Smith', addr: '123 Main St.', dob: '25/06/1991', gender: 'Female'}
]);

$scope.nameGridColumns = [
    {field: "fname", title: "First Name", width: "*" },
    {field: "lname", title: "Last Name", width: "*" },
    {field: "addr", title: "Address", width: "*" },
    {field: "dob", title: "DOB", width: "*"  },
    {field: "gender", title: "Gender", width: "*"  }
];

$scope.addName = function(e){
    this.namesGrid.dataSource.add( { fname: '', lname: '', addr: '', dob: '', gender: ''} );
}

});

我不确定我应该如何使用 angular 来以两种方式绑定组合框。

【问题讨论】：

标签： angularjs combobox kendo-ui kendo-grid kendo-combobox

【解决方案1】：

您正在使用 Jquery 声明剑道组合框。而是在您的控制器中创建一个选项并将其传递给 kendo 指令。

指令：

 <select id="slots" kendo-drop-down-list k-options="slotsOptions" style="width: 200px"></select>

在你的角度控制器中

 var dataSlotDuration = [
                   { text: "10", value: "10" },
                   { text: "15", value: "15" },
                   { text: "20", value: "20" },
                   { text: "30", value: "30" },
                   { text: "60", value: "60" }
    ];

function onSelectSlotDuration(e) {
    var dataItem = this.dataItem(e.item.index());
    // this is the seled value from drop-drop-list
    $scope.selectedSlotDuration = dataItem.value;

}

 $scope.slotsOptions = {
    dataSource: {
        data: dataSlotDuration
    },
    dataTextField: "text",
    dataValueField: "value",
    optionLabel: "Choose Slot Duration...",
    select: onSelectSlotDuration
}

它在剑道Docs

【讨论】：