0

I have a bootstrap dropdown to load the countries list by making an external api call. I want to show the three states of behavior(progress,success,error) in the dropdown using ng-show/hide. I am not sure how do i dynamically change ng-show/hide with in a dropdown like below?

1.In Progress (loadCountry =='progress' -Displaying the Loading... text)

2.Binded Successfully (loadCountry=='success' -bind the api response of country's list)

3.Error Message (loadCountry=='error' - If any error occured during the api data retrieval)

How do i insert the behavior for in progress and error in the below bootstrap dropdown using ng-show. I am setting the value for loadCountry scope variable from the directive's controller as progress,success,error automatically as per the flow goes.

<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>
JsLearner
  • 109
  • 1
  • 5
  • 16

1 Answers1

1

You can use ng-show="loadCountry=='...'" inside your dropdown:

<ul class="dropdown-menu" aria-labelledby="btnCntry">
    <div ng-show=" loadCountry == 'progress' ">Loading countries...</div>
    <div ng-show=" loadCountry == 'error' ">There was a error while load countries :(</div>
    <li ng-repeat="country in countryList">
        <a>{{country.name}}</a>
    </li>
</ul>

I don't put an ng-show inside the <li> tag because it don't show anything og the countryList is empty, but if you need to hide it (because their style makes it seem ugly), you can add ng-show=" loadCountry == 'success' " inside it.

Giovanni Benussi
  • 3,102
  • 2
  • 28
  • 30
  • I want loading ... text is my default and only the one text if it progress. how do i change it that switch between progress/success in the default selector code {{country.name}}. How do i handle progress and success on this default selection? – JsLearner May 02 '16 at 23:28
  • Take a look at this: http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates You want something like that? – Giovanni Benussi May 03 '16 at 01:00