Question

我无法确定如何在选择将某些按钮从btn btn-default更改为btn btn-primary并使用angularui时获取某些按钮。我尝试让它像这样工作

$('#uploadButton').click(function() {
 $('#uploadButton').removeClass("btn btn-default");
        $('#uploadButton').addClass("btn btn-primary");
 }

但这并不好。有人可以向我演示如何使用AngularUI执行此操作吗？

Answer 1

您需要使用ngClass directive。由于您只是在切换类，因此您不需要任何特定于AngularUI的内容来实现您想要的效果。

假设您的控制器中有一个值，用于指示按钮是否处于活动状态以及用于切换值的功能。它可能看起来像：

app.controller('MainCtrl', function($scope) {
  $scope.isActive = false;

  $scope.toggleActive = function() {
    $scope.isActive = !$scope.isActive;
  };
});

然后，您可以在标记中使用带有ngClass指令的isActive变量来决定使用哪个类：

<button type="button" class="btn" ng-class="{true: 'btn-primary', false: 'btn-default'}[isActive]" ng-click="toggleActive()">Upload</button>

在这种情况下，当btn-primary为true时，该按钮将包含isActive类，如果为{false，则为btn-default。单击该按钮将调用切换功能，该功能将更新活动值并使类更新。由于应始终应用btn，因此将其从逻辑中删除并简单地放入类属性。

这种方法还有一个好处，就是可以将CSS类保持在控制器逻辑之外。 IMO，这最终使控制器测试变得不那么脆弱，并且视图更加灵活。

您可以在Plunker上看到它。

Answer 2

(function() {
  'use strict';

  angular
    .module('app', [])
    .directive('bootstrapBtn', bootstrapBtn);

  function bootstrapBtn() {
    return {
      restrict: 'E',
      replace: true,
      template: '<button type="button" ng-class="test" class="btn" ng-click="add(1)">{{color}}</button>',
      link: function(scope, elem, attrs) {

        scope.counter = 0;
        scope.test = "btn-defalult";
        scope.color = "default";

        scope.add = function(inc) {
          scope.counter += inc;
          switch (scope.counter) {
            case 1:
              scope.test = "btn-danger";
              scope.color = "danger";
              break

            case 2:
              scope.test = "btn-success";
              scope.color = "success";
              break

            case 3:
              scope.test = "btn-warning";
              scope.color = "warning";
              break

            case 4:
              scope.test = "btn-info";
              scope.color = "info";
              break

            case 5:
              scope.test = "btn-primary";
              scope.color = "primary";
              break

            default:
              if (scope.counter > 4) {
                scope.test = "btn-defalult";
                scope.color = "default";
                scope.counter = 0;
              }
              break

          }
        };
      }
    }
  };
}());

你可以写这样的指令Plunker

AngularUI按钮颜色更改onclick

2 个答案: