Этот ответ, вероятно, устарел для текущих версий привязок Kendo Angular. Как упоминалось в ответе hally9k, теперь есть атрибут k-ng-model, который может справиться с этим, поэтому вы должны использовать
k-ng-model="selectedSport"
на месте
ng-model="selectedSport"
Предыдущий ответ ниже; это может быть или не быть актуальным, если вы используете более старую версию пользовательского интерфейса Kendo:
Я не думаю, что вы можете настроить виджет кендо для непосредственного хранения dataItem
- под всем этим все еще находится <select>
с примитивным значением. Поэтому вам, вероятно, придется получить dataItem из источника данных виджета, например. как это:
HTML:
<div ng-controller="MyController">
<select id='myDropDownList' kendo-drop-down-list ng-model="selectedSport" k-data-source="sports" k-data-value-field="'id'" k-data-text-field="'name'"></select>
<button ng-click='send()'>Submit</button>
</div>
JS:
function MyController($scope) {
$scope.selectedSport = null;
$scope.sports = new kendo.data.DataSource({
data: [{
id: 1,
name: 'Basketball'
}, {
id: 2,
name: 'Football'
}, {
id: 3,
name: 'Tennis'
}]
});
$scope.send = function () {
var dataItem = $scope.sports.get($scope.selectedSport);
console.log(dataItem);
};
}
Однако вы можете создать свою собственную директиву для kendoDropDownList, которая использует атрибут k-data-item
(например), и использовать ее следующим образом:
HTML:
<select id='date' k-ddl k-data-source="sports" k-data-text-field="name" k-data-item="dataItem">
JS:
var app = angular.module('Sample', ['kendo.directives']).directive("kDdl", function () {
return {
link: function (scope, element, attrs) {
$(element).kendoDropDownList({
dataTextField: attrs.kDataTextField,
dataValueField: "id",
dataSource: scope[attrs.kDataSource],
change: function () {
var that = this;
var item = that.dataItem();
scope.$apply(function () {
scope[attrs.kDataItem] = item.toJSON();
});
}
});
}
};
});
function MyController($scope) {
$scope.sports = [{
id: 1,
name: 'Basketball'
}, {
id: 2,
name: 'Football'
}, {
id: 3,
name: 'Tennis'
}];
$scope.dataItem = $scope.sports[0];
$scope.send = function () {
console.log($scope.dataItem);
};
}
Таким образом, вы можете сохранить контроллер свободным от кода, специфичного для Kendo UI DataSource, и вместо этого работать только с типами данных JS. (см. JSBin)
14.12.2013