Question

我有一个包含名称对象的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来双向绑定组合框的。

Answer 1

您正在使用Jquery声明kendo组合框。而是在您的控制器中创建一个选项并将其传递给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

将Kendo UI网格dataSource绑定到组合框

1 个答案: