Le menu déroulant Angular UI-Grid ne prend pas en compte les changements

Question

Je suis novice en ce qui concerne l'ui-grid angulaire. Je veux implémenter une liste déroulante pour l'édition en ligne et je suis ce tutoriel (colonne de genre): http://ui-grid.info/docs/#/tutorial/201_editable et je l'ai modifié en utilisant une nouvelle page cshtml (comme montré ci-dessous) parce que je veux plutôt utiliser l'option de la base de données d'entrer les options manuellement.

Le code ci-dessous où je mis en œuvre la liste déroulante:

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

Et voici le code de roleDropDownList.cshtml

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

Maintenant, je suis en mesure de choisir l'option mais il est comme ne pas capturer les changements lorsque je choisis 1 des options.

Voici l'exemple: DropDown sample

Comme vous pouvez le voir dans l'image, la ligne de couleur rouge signifie qu'il est rangée sale (modifiée), mais la ligne que j'edited avec menu déroulant ne signifie en couleur rouge, il est ne pas être édité et il ne peut pas être enregistré.

Answer 1

J'ai trouvé un moyen plus facile de mettre en œuvre ce que je veux.

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

editDropdownValueLabel est de définir la valeur des options sinon il affiche « non défini » comme l'image ci-dessous

Example of dropdown undefined options

editDropdownIdLabel est de montrer la valeur de l'option sélectionnée sinon il affiche ID comme image ci-dessous

Showed Id

Le code ci-dessous est pour obtenir les données de la base de données:

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