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:
<div class="col-sm-8" ng-controller="ConstantsController" ng-init="listDocumentSectionTypeConstants()">
<select class="form-control" id="section-type-list" name="section_type_list" ng-options="sectionType.description for sectionType in sectionTypes"
ng-model="ctrl.comment.documentSectionTypeConstant" ng-change="$parent.setSection()" required>
<option value=""> -- Please Select a Section --</option>
</select>
</div>
My HTML Code for Button:
<button class="btn btn-primary btn-xs" ng-click="editComment(comment)" data-toggle="tooltip" title="Edit Comment" data-placement="bottom"></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
My Screen
// Code
$scope.editComment = function (comm) {
self.comment={
documentSectionTypeConstant : comm.documentSectionTypeConstant
}
};
As your ctrl.comment.documentSectionTypeConstant is object, you can not bind your select with just string (sectionType.description), your ng-model should also be the object of documentSectionTypeConstant type.
Can you please change your ng-options as below?
ng-options="sectionType as sectionType.description for sectionType in sectionTypes"
This should work.
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);
Based on the information(less code to create) and problem statement provided in the question,I've made a DEMO for that recreating same scenario with different example.From what I have understood from question is,you are trying to change the drop down value based on click of a button.
So in the demo example we have a dropdown containing list of phones and a text field to enter price of the phone and a button to change the value in the drop down based on the price.
In HTML
<body ng-controller="dobController">
<select class="form-control" id="section-type-list" name="section_type_list"
ng-options="item.price as item.desc for item in items" ng-model="selectedType" ng-change="setSection()" required>
<option value=""> -- Please Select a Section --</option>
</select>
<input type ="text" ng-model="price"/>
<button class="btn btn-primary btn-xs" ng-click="editComment(price)" data-toggle="tooltip" title="Edit Comment" data-placement="bottom">Change Dropdown value</button>
</body>
In JS
$scope.selectedType = 100; //initial value to display in dropdown
$scope.items = [{
"item": "phone",
"desc": "Iphone 4",
"price": 100,
"qty": 1
}, {
"item": "phone",
"desc": "Iphone 5",
"price": 200,
"qty": 2
}, {
"item": "phone",
"desc": "Iphone 6",
"price": 300,
"qty": 3
}, {
"item": "phone",
"desc": "Iphone 7",
"price": 400,
"qty": 1
}];
//on click of button set the new value..
$scope.editComment = function(price){
$scope.selectedType = parseInt(price);
};
If you observe in HTML the way we represented the ng-options is
ng-options="item.price as item.desc for item in items"
This means that for every item in the items(list) display item's description and bind item's price in the ng-model="selectedType". That's why we are setting the price to ng-model="selectedType" on click of button which automatically display the desired value in dropdown.
NOTE:As the item.price is integer in items,for this case we had to parse the price value as it is bind to input field ng-model as text.This care should be taken care when ever we are using numbers as ng-model as ng-options checks as (===).
Hope this explanation gives you some light on where you are going wrong.
In your case change ng-options to ng-options="sectionType.ID as sectionType.description for sectionType in sectionTypes" and in JS
$scope.editComment = function (comm) {
self.comment.documentSectionTypeConstant = comm.documentSectionTypeConstant.ID; //assuming this object contains similar data
}
