如何禁用ui.bootstrap.pagination

Question

我正在使用ui.bootstrap.pagination

我在我的页面上有一个表单中的搜索框。我想在某人与搜索框交互时禁用分页控件，然后在他们按下“搜索”后重新启用

我想使用AngularJS表单验证

ng-valid
ng-invalid
ng-pristine
ng-dirty

如何将表单验证与禁用分页联系起来？

我找不到如何使分页控件显示为禁用并禁用输入。我也在使用Bootstrap 3。

提亚

Answer 1

对指令ngDisabled的支持是在一个小时前添加到分页指令中的……;)

您应该能够从外部阻止整个分页元素。假设您的作用域中有名为blocked的变量，该变量指示何时应该阻止分页。然后您可以像这样阻止它：

<pagination 
    total-items="totalItems" 
    ng-model="currentPage" 
    ng-change="pageChanged()" 
    ng-disabled="blocked"
></pagination>

目前要使用它，你应该自己从official repo构建最新版本。

Answer 2

我在这里完全接近..

<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>

如果您的页面中有类似的内容，那么您可以将其更改为以下内容，假设您的搜索表单名为'searchForm'：

<pagination 
     ng-class="{true:'', false:'disable'}[(searchForm.$valid)]"
     direction-links="false" boundary-links="true" 
     total-items="totalItems" ng-model="currentPage"></pagination>

其中，disable是一些CSS类，它调整分页控件，使它们看起来是禁用的。

或者：

 <pagination 
     ng-if="!searchForm.$valid"
     direction-links="false" boundary-links="true" 
     total-items="totalItems" ng-model="currentPage"></pagination>

如果窗体无效，使用ng-if或ng-show/hide切换控件的可见性。