將Kendo UI網格數據源綁定到組合框

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: ''} );
}

}）;

我不知道我應該如何使用角度來雙向綁定一個組合框。

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
}

它在劍道文檔中