I have following dropdown in the html template.
<div class="row">
<label class="text-label hint--top-right hint--large" data-hint="{{customer.config.METHOD.DESCRIPTION}}">Calculation Method</label>
<div class="input-select">
<select class="input-select__select" ng-model="customer.attributes.tradingParameters.method">
<option ng-repeat="indicator in customer.config.METHOD.VALUE" ng-selected="customer.attributes.tradingParameters.method == customer.shortenIndicator(indicator)" ng-value="customer.shortenIndicator(indicator)">{{indicator}}</option>
</select>
</div>
</div>
I'm using ng-repeat to generate the dropdown from a CONSTANT config file. Below is the config file.
vm.config = {
'METHOD': {
'VALUE': ['N - No', 'Y- Yes'],
'Description': 'Some description while hovering over'
}
}
On valid response, I assign the response object with indicators to atrributes property in the controller. And then using the ng-model to select the appropriate value. However the twist is, the server sends just a single letter indicator, while in the dropdown I MUST have indicator with some description like 'N - No'.
So I added a ng-selected expression which compares the indicator returned from server with shortened version. Shortned version is created by calling the shortenIndicator method in the controller which splices the indicator on the first occurrence of a space.
vm.shortenIndicator = function(fullIndicatorValue){
return fullIndicatorValue.slice(0, fullIndicatorValue.indexOf(' '));
};
So this is kinda weird behavior where only the first option in the dropdown in not getting selected when its returned from the server. However if the server sends second or third option its getting selected.