在angularjs ui-select中加载微调器

Question

我正在使用 AngularJs 和 ui-select，我想在从服务器检索数据期间使用微调器。 如何在 html 代码中放置微调器？ 这是实际的 HTML 代码

<div class="col-md-4 form-group">
    <ui-select theme="bootstrap" multiple
        ng-click="populateFilterFleet()"
        on-select="selectFleet($item, $model)"
        on-remove="deSelectFleet($item, $model)" id="fleet"
        name="fleet" data-ng-model="model.idFleetName"
        data-ng-cloak> <ui-select-match
        placeholder="Select Fleet"> <span
        data-ng-style="$item.color && {'color': '{{$item.color}}' }"><i
        class="fa fa-circle"></i></span> {{$item.fleetName}} </ui-select-match> <ui-select-choices
        repeat="singleFleet in fleets | filter: $select.search">                                
    <div class="row"
        style="border-bottom: 1px dashed lightgrey;">

        <div class="col-md-6">                                              
            <b>{{singleFleet.fleetName}}</b>&nbsp;
        </div>
        <div class="col-md-4"></div>
        <div class="col-md-2" data-toggle="tooltip"
            data-placement="left" title="Navigate to fleet">
            <a ng-click="navigateToFleet(singleFleet.idFleetName)"
                class="pull-right"><i
                style="margin-right: 5px; color: black;"
                class="fa fa-external-link"></i></a>
        </div>
    </div>
    </ui-select-choices> <ui-select-no-choice>No Fleet</ui-select-no-choice> </ui-select>
</div>

我想在 select 中添加一个微调器：

<i data-ng-show="true" class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span></div> 

通过 ng-show 中的变量，我可以管理从服务器检索的数据。

Answer 1

您可以通过使用 css 来做到这一点，尽管这不是最优雅的方式。使用css位置属性将加载图标放在选择框的顶部，并使用ng-show根据您的要求使其可见\隐藏。比如：

<div class="col-md-4 form-group">

<i data-ng-show="true" class="fa fa-spinner fa-pulse fa-3x fa-fw" style="position: relative; top: 16px; left: 5px; z-index: 100"></i>
<!-- You can correct the top, left values as per your requirement and put this in some class to make your code neat-->
<span class="sr-only">Loading...</span></div> 

<ui-select theme="bootstrap" multiple
    ng-click="populateFilterFleet()"
    on-select="selectFleet($item, $model)"
    on-remove="deSelectFleet($item, $model)" id="fleet"
    name="fleet" data-ng-model="model.idFleetName"
    data-ng-cloak> <ui-select-match
    placeholder="Select Fleet"> <span
    data-ng-style="$item.color && {'color': '{{$item.color}}' }"><i
    class="fa fa-circle"></i></span> {{$item.fleetName}} </ui-select-match> <ui-select-choices
    repeat="singleFleet in fleets | filter: $select.search">                                
<div class="row"
    style="border-bottom: 1px dashed lightgrey;">

    <div class="col-md-6">                                              
        <b>{{singleFleet.fleetName}}</b>&nbsp;
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-2" data-toggle="tooltip"
        data-placement="left" title="Navigate to fleet">
        <a ng-click="navigateToFleet(singleFleet.idFleetName)"
            class="pull-right"><i
            style="margin-right: 5px; color: black;"
            class="fa fa-external-link"></i></a>
    </div>
</div>
</ui-select-choices> <ui-select-no-choice>No Fleet</ui-select-no-choice> </ui-select>
</div>