Question

我有一个大约3或4千行的数据表，设置了寻呼机和过滤等。对于我的大多数用户来说，这是最佳选择，但其中一些人已经决定他们喜欢选择“向我显示所有记录，不分页”。

所以我想我会给他们一个复选框：

<div class="checkbox">
    <label>
        <input type="checkbox" id="chbShowAll" ng-model="vm.ShowAll" ng-change="vm.ShowAllToggle()" /> Show All Results on One Page
        <span ng-if="vm.showingAll"> <i class="fa fa-fw fa-spinner fa-spin fa-lg" title="Refreshing Results..."></i></span>
    </label>
</div>

该复选框会触发一个方法，将我的页面大小从25（默认值）翻转到返回结果的大小。我已经添加了一个ng-if到分页，所以当选中此复选框时它会隐藏。

vm.ShowAllToggle = (
    function() {
        var showAll = vm.ShowAll;
        vm.showingAll = true;

        if (hasValue(showAll) &&
            showAll) {
            vm.currentPage = 1;
            vm.pageSize    = vm.MyCustomers.length;
        } else {
            vm.currentPage = 1;
            vm.pageSize    = 25;
        }

        vm.showingAll = false;
    }
);

现在，这一切都有效，但是对于更大的记录集，我想显示一个微调器，以便用户知道“这可能需要一秒钟。”

相反，我得到的是浏览器锁定，直到页面重新绘制了更大的网格。

那么，我怎样才能让它运行一个微调器（运行vm.showingAll的真/假），以及不锁定浏览器的奖励（虽然我愿意让微调器成为一个“加载模态“灰显窗口，直到它重新粉刷？”

Answer 1

您可以使用angular-spinner模块。将模块添加为依赖项，然后在html中添加此代码：

<div class="checkbox">
    <label>
        <input type="checkbox" id="chbShowAll" ng-model="vm.ShowAll" ng-change="vm.ShowAllToggle()" /> Show All Results on One Page            
    </label>
</div>
<span spinner-on="vm.ShowingAll"></span>
<div ng-if="!vm.ShowingAll">
    <!-- Your data table goes here -->
</div>

此外，您可以根据需要自定义微调器！

如何：AngularJs'全部显示'复选框显示没有分页的所有行（切换）

1 个答案: