Получить выбранный объект из раскрывающегося списка Kendo

Question

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

<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 ID. Тем не менее, я хочу весь объект. Каждый другой столбец StackOverflow, который я нашел, извлекает идентификатор. Для жизни меня я не могу понять, как получить объект. Кто-нибудь знает, как получить выбранный объект JSON, а не только идентификатор?

Спасибо!

Answer 1

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

k-ng-model="selectedSport" 

вместо

ng-model="selectedSport" 

Предыдущий ответ ниже; это может или не может по-прежнему иметь важное значение в случае, если вы используете старую версию Кендо UI:

Я не думаю, что вы можете настроить кендо виджет для хранения 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); 
    }; 
} 

Таким образом, вы могли бы держать контроллер свободный от Кендо UI DataSource специфичного кода, и вместо того, чтобы работать только с типами данных JS. (См JSBin)

Answer 2

Я знаю, что это старый вопрос, но вы можете использовать выберите событие DropDownList, чтобы получить базовый объект JSON:

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

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

Answer 3

Использование K-нг-модель будет связывать DataItem, а не только текстовое значение:

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

Answer 4

Правильный способ получить текстовое значение является использование «K-выберите» событие 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> 

Затем в угловом контроллер разоблачить функцию «тест» (пример предполагает, что вы используете «контроллер в качестве виртуальной машины»):

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

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

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