AngularUI Button color changes onclick

I'm having trouble figuring out how to get certain buttons when selected to change from btn btn-default to btn btn-primary with angularui. I tried getting it working like this

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

but it's no good. Can someone demonstrate to me how to do this with AngularUI?

Answers


You'll want to use the ngClass directive. Since you are only toggling classes, you do not need anything specific to AngularUI to achieve the effect you want.

Let's say that in your controller you have a value that indicates whether the button is toggled active and a function to toggle the value. It might look something like:

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

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

You can then use the isActive variable with the ngClass directive in your markup to make decisions about which class to use:

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

In this case, the button will have the class btn-primary when isActive is true, and btn-default when it is false. Clicking the button will call the toggle function, which will update the active value and cause the class to update. Since btn should always be applied, it is removed from the logic and simply put in a class attribute.

This approach has the added benefit of keeping your CSS classes out of your controller logic. IMO, this ultimately makes the controller tests less brittle and the view more flexible.

You can see it in action on Plunker.


(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

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

You can write directive like this Plunker


Need Your Help

Query returns results when it should not

gracenote

I'm trying to work with the GraceNote web API and I'm getting unexpected results. For example, when I run a query to get the track info for Green Day/Dookie/She I get everything I'm asking for, yet...

CodeIgniter Pagination Problem

php codeigniter pagination

I am using codeigniter and its pagination class. It works perfectly and it looks something like this: