Angular UI-Grid下拉菜單不捕捉變化

Question

我是新的角度ui網格。

我想實現一個內聯編輯下拉框，我按照下面的教程（性別列）：http://ui-grid.info/docs/#/tutorial/201_editable，我修改它通過使用新的cshtml頁面（如下圖所示），因爲我想從數據庫設置選項，而不是手動輸入選項。

下面的代碼是我實現的下拉框：

name: app.localize('Roles'), 
field: 'getRoleNames()', 
minWidth: 160, 
editableCellTemplate: '~/App/common/views/users/roleDropDownList.cshtml' 

這裏是roleDropDownList.cshtml

的代碼

<div ng-controller="common.views.users.index as vm"> 
    <select> 
     <option ng-repeat="role in vm.roles">{{role.displayName}}</option> 
    </select> 
</div> 

現在我能夠選擇的選項，但它像當我選擇其中一個選項時不捕獲更改。

這裏是例子： DropDown sample

正如你可以在圖片中看到，在紅色的行意味着它的髒行（編輯），但我有下拉編輯的行不以紅色意味着它的沒有被編輯，也不能保存。

Answer 1

我發現了一種更容易實現我想要的方式。

name: app.localize('Roles'), 
field: 'getRoleNames()', 
minWidth: 160 
editableCellTemplate: 'ui-grid/dropdownEditor', 
editDropdownValueLabel: 'displayName', 
editDropdownIdLabel: 'displayName' 

editDropdownValueLabel是設置否則會顯示「未定義」作爲圖像顯示在下面

Example of dropdown undefined options

editDropdownIdLabel的選項值是否則顯示所選擇的選項的值將顯示ID如下圖所示

Showed Id

下面的代碼是從數據庫中獲取數據：

vm.userGridOptions.columnDefs[3].editDropdownOptionsArray = result.data.items;