I have two dropdowns with ng-options. One for displaying primary brokers and other for secondary brokers. The Mark-up is as follows:-
<div class="col-md-4">
<div class="form-group">
<label>Primary Broker: </label>
<button type="button" class="btn-help" tabindex="-1" data-popover="" data-content="Lead JLL broker for the opportunity">
<span class="circle-help">?</span>
</button>
<select class="form-control"
ng-options="jllContact.JllUserId as jllContact.Name for jllContact in controller.primaryJllBrokers"
ng-model="controller.primaryJllContactId"
id="primaryJllContact" data-field='{"name": "Primary Broker", "attribute": "PrimaryJllContact"}'
ng-change="controller.setPrimaryJllContact()"
ng-class="{'req': controller.data.isFieldRequired('PrimaryJllContact'), 'has-error': controller.data.isFieldValid('PrimaryJllContact') == false}"
ng-disabled="!controller.isEnabled('JllContacts')||!controller.canEditBrokerAllocation()">
<option value="">Select Primary Broker</option>
</select>
</div>
</div>
@* Secondary Broker*@
<div class="col-md-4">
<div class="form-group">
<label>Secondary Broker: </label>
<button type="button" class="btn-help" tabindex="-1" data-popover="" data-content="Secondary JLL broker for the opportunity">
<span class="circle-help">?</span>
</button>
<select class="form-control"
ng-options="jllContact.JllUserId as jllContact.Name for jllContact in controller.secondaryJllBrokers"
ng-model="controller.data.SecondaryJllContactId"
id="secondaryJllContact" data-field='{"name": "Secondary Broker", "attribute": "SecondaryJllContact"}'
ng-change="controller.handleSecondaryJllContactChange()"
ng-class="{'req': controller.data.isFieldRequired('SecondaryJllContact'), 'has-error': controller.data.isFieldValid('SecondaryJllContact') == false}"
ng-disabled="!controller.isEnabled('JllContacts')||!controller.canEditBrokerAllocation()">
<option value="">Select Secondary Broker</option>
</select>
</div>
When I change the secondary broker, as seen in the markup I call a method called handleSecondaryJllContactChange. The method is as follows.
handleSecondaryJllContactChange:()=>
primaryJllContactId = this.primaryJllContactId
this.refreshPrimaryBrokers((primaryBrokers)=> this.primaryJllContactId = primaryJllContactId)
refreshPrimaryBrokers:(callback)->
this.primaryJllBrokers = _.where(this.data.JllContacts, (jllc)=> jllc.Role.ID == 21 && jllc.JllUserId != this.data.SecondaryJllContactId)
if callback? && callback!= undefined && this.primaryJllBrokers!=null && this.primaryJllBrokers != undefined
callback(this.primaryJllBrokers)
As seen from the code, we are setting the ng-model "controller.primaryJllContactId" for the first drop down after the collection controller.primaryJllBrokers has been refreshed.
However, the drop down still shows instead of the correct option in IE 11.
NOTE:
- On examining the console, we did notice that ng-model for the first dropdown controller.primaryJllContactId has the right value. It just doesn't display correctly in the drop down.
- This is happenning only in IE 11. It works perfectly in chrome.
Couple of things we have tried:-
- Instead of ng-change="controller.handleSecondaryJllContactChange()" in the second dropdown we tried to have a watch on controller.secondaryJllBrokers and call the method controller.handleSecondaryJllContactChange().
- The second route which we took was based on the assumption that we are setting the ng-model before options are rendered. Hence we took the $timeout approach. In the handleSecondaryJllContactChange() method shown above we did this in the second line:-
this.refreshPrimaryBrokers((primaryBrokers)=> this.$timeout(=> this.primaryJllContactId = primaryJllContactId))
None of these two approaches worked. Any ideas why this is happening and what is the way to know when options have finished rendering.
Thanks in Advance !!!!
Aucun commentaire:
Enregistrer un commentaire