Currently, I have implemented a bootstrap dropdown that loads a list of countries by making an external API call. My goal is to display three different states of behavior (progress, success, error) in the dropdown using ng-show/hide. However, I am unsure how to dynamically change ng-show/hide within a dropdown as described below:
1. In Progress (loadCountry =='progress' - Displaying the "Loading..." text)
2. Binded Successfully (loadCountry=='success' - Binding the API response of the country's list)
3. Error Message (loadCountry=='error' - Displaying an error message if any error occurs during the API data retrieval)
I am confused about how to include the behavior for "In Progress" and "Error" in the bootstrap dropdown using ng-show. In my case, the value for the loadCountry scope variable is automatically set to progress, success, or error based on the flow.
<div ng-show="loadCountry== 'success'>
<button class="btn dropdown-toggle" type="button" id="btnCntry"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{selectedCountry}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnCntry">
<li ng-repeat="country in countryList">
<a>{{country.name}}</a>
</ul>
</div>