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