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 position属性将加载图标放置在选择框的顶部，并根据需要使用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>

在angularjs ui-select中加载微调器

1 个答案: