I have a form in which there are many fields. This form is under Angular Controller, say Parent. This form has a drop down that is populated using Angular Controller, say Child. There is an Add button to this form on click of which all the details are stored in the DB. These added values are displayed as a row in a table below the form in the same page.
Each row of this table has Edit button. On click of this edit button, the values should be populated in the form above in it's respective fields. I am able to get populated all values except the drop down. I have the ng-model used for the drop down in form, set with appropriate values on click of Edit Button. When I click on edit, drop down options are not selected though its model object is set correctly. It still displays the first default option.
How do I get the drop down option selected?
PN: On debugging the console, I see the hashkey of dropdown values different from the one retrieved from the table row.
My HTML Code for Form:
ng-model="ctrl.comment.documentSectionTypeConstant" ng-change="$parent.setSection()" required>
-- Please Select a Section --
My HTML Code for Button:
My Angular Controller
$scope.editComment = function (comm) {
self.comment.documentSectionTypeConstant = comm.documentSectionTypeConstant;
}
Note that there is no issue in add, update or delete operation.
EDIT (To include Data JSON)
On selecting a dropdown:
Object {
id: "DST_FOREWORD",
active: 0,
defaultSelection: false,
description: "Foreword",
showInUi: true…}
$$hashKey:"object:36"
accountNonExpired:true
accountNonLocked:true
active:0
credentialsNonExpired:true
defaultSelection:false
description:"Foreword"
enabled:true
id:"DST_FOREWORD"
showInUi:true
sortSequence:null
username:null
On Click of Edit Button (Added Dropdown Value)
Object {$$hashKey: "object:57", id: "DST_FOREWORD", description: "Foreword"}
$$hashKey:"object:57"
description:"Foreword"
id:"DST_FOREWORD"
Note that the hashkey are different in both the cases. Not sure if that is what the cause is.
Edit 2
解决方案
I was able to achieve this using jquery. This is a definite hack. Not sure how to achieve this in angular, thus opting for jquery as of now until I find a more apt solution.
$("#section-type-list option:contains('" + comm.documentSectionTypeConstant.description + "')").prop('selected', true);