Question

我正在使用劍道下拉列表。更具體地說，我使用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帖子都會檢索ID。對於我的生活，我無法弄清楚如何獲得物體。有誰知道如何獲得選定的JSON對象，而不是僅僅是ID？

謝謝！

Answer 1

這個答案可能已經過時了Kendo Angular綁定的當前版本。 作爲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數據源特定代碼的自由，而僅工作，JS數據類型的控制器。 （見JSBin）

Answer 2

我知道這是一個老問題，但你可以使用下拉列表中選擇事件，以獲得基本的JSON對象：

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

你會然後存儲JSON對象（項目變量以上）從選擇事件，以便您可以從您的提交方法得到它。可能有一種方法可以獲取選定的json對象，而無需使用select事件。

Answer 3

使用K-NG-模式將綁定的DataItem而不僅僅是文本值：

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

Answer 4

正確的方法來獲取文本值是使用Kendos下拉列表中的「K-選擇」事件：

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

然後在您的角度控制器暴露 '測試' 功能（例如假定使用 '控制器作爲VM'）：

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

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

我希望有所幫助。