CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
user3335796
user3335796

Reputation: 1237

Change button color which is dynamically generated in loop

I have a loop which generates buttons. I have three buttons. Each button is the same color. On click on one of the buttons, color will change but that change is applied to all buttons. I want to change color for just that particular button.

So far in html file

  <button ng-click="buttonClicked('Button1');" ng-class="{'btn-danger' : Button1}" app-Click>Pending</button>
  <button ng-click="buttonClicked('Button2');" ng-class="{'btn-primary' : Button2}" app-Click>Dispatched</button>
  <button  ng-click=" buttonClicked('Button3');" ng-class="{'btn-info' : Button3}" app-Click>Delivered</button>

In js file under controller 

   $scope.buttonClicked=function(value){
    if(value == 'Button1'){
        $scope.Button1 = true;
        $scope.Button2 = false;
        $scope.Button3 = false; 

    }
    else if(value == 'Button2'){
        $scope.Button2 = true; 
        $scope.Button1 = false;
        $scope.Button3 = false; 
    }
    else 
    {
        $scope.Button2 = false; 
        $scope.Button1 = false;
        $scope.Button3 = true;
    }
   }

Since it is in ng-class I think its getting affected to all buttons. How do I achieve this?

Upvotes: 0

Views: 2757

Answers (2)

Avraam Mavridis
Avraam Mavridis

Reputation: 8920

You can do something like that

var myApp = angular.module('myApp', []);

    angular.module('myApp').controller('MyCtrl', function($scope) {
      
      $scope.buttons = [
        { label:'Pending'}, 
        { label:'Dispatched'},
        { label:'Delivered'}
     ];
      
      $scope.clickedButton = 0;
      $scope.clickButton = function(v){ 
        $scope.clickedButton = v; 
      }

    });
.Pending{
 background-color: yellow;
}

.Delivered{
 background-color: green;
}

.Dispatched{
 background-color: red;
}
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>

<body ng-controller="MyCtrl">
  <button class="" 
    ng-repeat="button in buttons track by $index" 
    ng-click="clickButton($index)" 
    ng-class="clickedButton == $index ? button.label : '' " > 
      {{ button.label }}
  </button>
</body>

</html>

I think is the most elegant solution.

Upvotes: 3

Cyril Gandon
Cyril Gandon

Reputation: 17068

Each of your group of 3 buttons must have is own backing object to stock the state of each button. I advise you to create three function for dealing with 3 buttons.

Here is an example with 6 buttons:

angular.module('myApp', []);
angular.module('myApp').controller('MyCtrl', function($scope) {

  // Model, or ViewModel of your buttons
  // You need to create this object in order to handle the status of each buttons separately
  $scope.buttons = [{
    Button1: false,
    Button2: false,
    Button3: false
  }, {
    Button1: false,
    Button2: false,
    Button3: false
  }];

  function uncheckedAll(button) {
    button.Button1 = false;
    button.Button2 = false;
    button.Button3 = false;
  }

  $scope.button1Clicked = function(button) {
    uncheckedAll(button);
    button.Button1 = true;
  };
  $scope.button2Clicked = function(button) {
    uncheckedAll(button);
    button.Button2 = true;
  };
  $scope.button3Clicked = function(button) {
    uncheckedAll(button);
    button.Button3 = true;
  };
});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>

<body ng-controller="MyCtrl">
  <div ng-repeat="button in buttons">
    <button ng-click="button1Clicked (button);" ng-class="{'btn-danger' : button.Button1}" app-Click>Pending</button>
    <button ng-click="button2Clicked (button);" ng-class="{'btn-primary' : button.Button2}" app-Click>Dispatched</button>
    <button ng-click="button3Clicked (button);" ng-class="{'btn-info' : button.Button3}" app-Click>Delivered</button>
  </div>
</body>

</html>

Upvotes: 1

Related Questions