AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err

AngularJS: Dynamically maintain the 3 states (InProgress,Success,Error) of a dropdown using ng-show/hide?

本文关键字：状态 3种 InProgress Success Err 下拉列表 ng-show 使用 hide 维护 动态      更新时间：2023-09-26

我有一个引导下拉列表，通过调用外部api来加载国家/地区列表。我想使用ng-show/hide在下拉列表中显示行为的三种状态（进度、成功、错误）。我不知道如何在下面这样的下拉列表中动态更改ng显示/隐藏？

1.进行中（loadCountry='Progress'-显示加载…文本）

2.绑定成功（loadCountry=='success'-绑定国家列表的api响应）

3.错误消息（loadCountry=='Error'-如果在api数据期间发生任何错误检索）

如何使用ng-show在下面的引导程序下拉列表中插入进行中和错误的行为。我正在根据流程自动将指令的控制器中的loadCountry范围变量的值设置为进度、成功和错误。

<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>

您可以在下拉列表中使用ng-show="loadCountry=='…'"：

<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>

我没有在<li>标签中放一个ng-show，因为当countryList为空时，它不会显示任何内容，但如果你需要隐藏它（因为他们的风格让它看起来很难看），你可以在里面添加ng-show=" loadCountry == 'success' "。

相关文章：