Question

我正在使用ui.bootstrap.pagination

我的页面上有一个表单中的搜索框。我想在有人与搜索框进行交互时禁用分页控件，然后在按下后重新启用＆＃34;搜索＆＃34;

我想使用AngularJS表格验证

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

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

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

TIA

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>

如果您的页面中有类似内容，那么您可以将其更改为此类内容，假设您的搜索表单已被调用＆＃39; searchForm＆＃39;：

<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切换控件的可见性。

如何禁用ui.bootstrap.pagination

2 个答案: