Получить Выбранный Объект Из Выпадающего Списка Kendo

Я использую раскрывающийся список Kendo. Более конкретно, я использую угловые директивы кендо. В настоящее время в моей разметке есть следующее:

<input id='myDropDownList' kendo-drop-down-list ng-model="selectedSport" k-data-source="sports" k-data-text-field="'name'" />
<button ng-click='send()'>Submit</button>

мой контроллер имеет следующие:

$scope.selectedSport = null;
$scope.sports: [
  { id: 1, name: 'Basketball' },
  { id: 2, name: 'Football' },
  { id: 3, name: 'Tennis' }
];

$scope.send = function () {
  alert($scope.selectedSport);
};

когда я запускаю этот код, я получаю идентификатор selectedSport. Однако мне нужен весь объект. Каждый другой пост StackOverflow, который я нашел, использует, получает идентификатор. Хоть убей, я не могу понять, как достать этот предмет. Кто-нибудь знает, как получить выбранный JSON объект вместо id?

спасибо!

6
angularjs kendo-ui

4 ответов

этот ответ, вероятно, устарел для текущих версий угловых Привязок Kendo. Как упоминалось в ответе hally9k, теперь есть атрибут K-ng-model это может справиться с этим, поэтому вы будете использовать

k-ng-model="selectedSport"

на месте

ng-model="selectedSport"

предыдущий ответ ниже; это может быть или не быть актуальным, если вы используете более старую версию Kendo UI:

Я не думаю, что вы можете настроить виджет kendo для хранения the 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 и вместо этого работать только с типами данных JS. (см. JSBin)

9

использование K-ng-model свяжет dataItem вместо текстового значения:

<input id='myDropDownList' kendo-drop-down-list k-ng-model="selectedSport" k-data-source="sports" k-data-text-field="'name'" />
5

Я знаю, что это старый вопрос, но вы можете использовать событие select из dropdownlist для получения базового объекта json:

select: function (e) {
    var item = this.dataItem(e.item.index());
    ...
}

затем вы сохраните объект json (переменная элемента выше) из события select, чтобы вы могли добраться до него из своего метода отправки. Вероятно,есть способ получить выбранный объект json без использования события select.

0

правильный способ получить текстовое значение-использовать событие "k-select" kendos dropdownlist:

<select kendo-drop-down-list k-select="vm.test" k-data-text-field="'groupName'" k-data-value-field="'id'" k-data-source="vm.groupList" ng-model="vm.groupId"></select>

затем в вашем угловом контроллере выставьте функцию "test" (пример предполагает, что вы используете "контроллер как vm"):

function DocumentTypeController() {
  var vm = this;
  vm.test = test;
  vm.groupId = null;

  function test(dropdown) {
    alert('text is:' + dropdown.item.text());
  }
}

надеюсь, это поможет.

0