angular button clicks

by Sparrow Squire

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<!-- Method #1 -->
<span toggleAll class="button" ng-class="{'active': isActive}" ng-click="activate()">Button 1</span>
<span toggleAll class="button" ng-class="{'active': isActive}" ng-click="activate()">Button 2</span>
<span toggleAll class="button" ng-class="{'active': isActive}" ng-click="activate()">Button 3</span>

<br><br><br><br><br><br><br><br><br>

<!-- Method #2 -->
<span isolate class="button" ng-class="{'active': isActive}" ng-click="isActive = !isActive">Button 1</span>
<span isolate class="button" ng-class="{'active': isActive}" ng-click="isActive = !isActive">Button 2</span>
<span isolate class="button" ng-class="{'active': isActive}" ng-click="isActive = !isActive">Button 3</span>

<br><br><br><br><br><br><br><br><br>

<!-- Method #3 -->
<span class="button" ng-class="{'active': current === 1}" ng-click="current = 1">Button 1</span>
<span class="button" ng-class="{'active': current === 2}" ng-click="current = 2">Button 2</span>
<span class="button" ng-class="{'active': current === 3}" ng-click="current = 3">Button 3</span>

CSS

.button {
  float: left;
  color: grey;
  font-weight: bold;
  background:#fff;
  border: 1px solid lightgrey;
  padding: 5px 10px;
  margin: 10px 5px
}

.active {
  color: #fff;
  background: teal;
  border: 1px solid teal
}

JavaScript

// Method #1 All have class
app.directive('toggleAll', function() {
		return {scope: true};
    $scope.isActive = false;
    $scope.activate = function(){
        $scope.isActive = !$scope.isActive;
    };
});    


// Method #2 Toggle isolated
app.directive('isolate', function() {
    return {scope: true};
});    


// Method #3 only one has class at a time