我有一个引导下拉列表,通过调用外部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' "
。