Get Selected Objekt der Kendo Drop-Down-Liste

Question

Ich verwende die Kendo Dropdown-Liste. Genauer gesagt verwende ich Kendo Angular-Anweisungen. Derzeit habe ich folgendes in meinem Markup:

<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> 

Mein Controller verfügt über die folgenden:

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

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

Wenn ich diesen Code ausführen, bekomme ich die selectedSport ID. Ich möchte jedoch das gesamte Objekt. Jeder andere StackOverflow-Post, den ich verwendet habe, ruft die ID ab. Für das Leben von mir kann ich nicht herausfinden, wie man das Objekt bekommt. Kann jemand das ausgewählte JSON-Objekt anstelle nur der ID erhalten?

Danke!

Answer 1

Diese Antwort ist wahrscheinlich überholt für aktuelle Versionen der Kendo Angular Bindungen. Wie in hally9k Antwort erwähnt, gibt es jetzt ein Attribut k-ng-model, die damit umgehen können, so würden Sie

k-ng-model="selectedSport" 

anstelle von

ng-model="selectedSport" 

vorherige Antwort unten verwenden; dies nicht noch kann oder auch für den Fall relevant sein, das Sie eine ältere Version von Kendo UI verwenden:

ich Sie glaube nicht, dass die Kendo-Widget das dataItem direkt zu speichern, konfigurieren können - darunter alle noch ein <select> mit einem primitiven Wert. Daher müssen Sie das dataItem wahrscheinlich aus der Datenquelle des Widgets abrufen, z. wie folgt aus:

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

Sie können jedoch Ihre eigene Richtlinie für kendoDropDownList schaffen, die eine k-data-item Attribut (zum Beispiel) verwendet und es wie folgt verwenden :

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

Auf diese Weise Sie den Controller frei von Kendo UI Datasource-spezifischen Code und stattdessen nur die Arbeit mit JS Datentypen halten konnte. (Siehe JSBin)

Answer 2

Ich weiß, dass dies eine alte Frage, aber man konnte das select-Ereignis des Dropdownlist verwenden, um das zugrunde liegende Json-Objekt zu erhalten:

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

Sie würden dann speichern Sie das JSON-Objekt (Elementvariable oben) aus dem Select-Event, damit Sie von Ihrer Submit-Methode aus darauf zugreifen können. Es gibt wahrscheinlich eine Möglichkeit, das ausgewählte json-Objekt zu erhalten, ohne das select-Ereignis zu verwenden.

Answer 3

Mit k-ng-Modell wird die dataItem statt nur den Textwert binden:

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

Answer 4

Der richtige Weg, den Textwert zu erhalten, ist das ‚k-select‘ Ereignis von Kendos Dropdownlist zu verwenden:

<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> 

Dann in Ihrem Winkel Controller setzt die 'Test' Funktion (Beispiel vorausgesetzt, dass Sie 'Controller als vm' verwenden):

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

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

Ich hoffe das hilft.