Question

因此，使用bootstrap，单击按钮时实现“加载”状态似乎非常简单，请参阅下面的链接（状态部分）：

http://getbootstrap.com/javascript/#buttons-stateful

我做了一些研究，但是无法通过Angular Bootstrap UI lib找到在Angular中实现的简单方法。有什么提示吗？

Answer 1

您可以设置文本，禁用状态等，具体取决于您是否正在加载数据。像这样的东西

<button ng-click="vm.clickAction()" ng-disabled="vm.loading" type="button" class="btn btn-primary">
    {{ vm.loading ? 'Loading...' : 'Click me!' }}
</button>

然后在控制器中

.controller('TestController', function(someService) {
  var vm = this;
  vm.loading = false;

  vm.clickAction = function() {
    vm.loading = true;
    someService.doSomething().then(function(someData) {
      vm.someData = someData; // optional
      vm.loading = false;
    });
  }
}

Answer 2

我们在这里使用类似的东西：

https://github.com/cgross/angular-busy

Answer 3

当$scope.loading为真时，这会将按钮的类更改为活动状态，将文本更改为“正在加载”：

<button ng-click="myClick()" ng-class="{active: loading}">
    <span ng-show="loading">Loading</span>
    <span ng-hide="loading">Submit</span>
</button>

或者，如果您想要禁用该按钮，请使用：

<button ng-click="myClick()" ng-disabled="loading">
    <span ng-show="loading">Loading</span>
    <span ng-hide="loading">Submit</span>
</button>

在您的控制器中，添加此功能：

$scope.loading = false;
$scope.myClick = function() {
    $scope.loading = true;
    ... do something slow
    $scope.loading = false;
}

如何在Angular中实现Bootstrap有状态按钮？

3 个答案: