Question

我有一个生成按钮的循环。我有三个按钮。每个按钮颜色相同。单击其中一个按钮，颜色将更改，但该更改将应用于所有按钮。我想改变那个特定按钮的颜色。

到目前为止在html文件中

  <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>

在控制器

下的js文件中

   $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;
    }
   }

因为它是ng-class，我认为它会受到所有按钮的影响。我如何实现这一目标？

Answer 1

你可以做那样的事情

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>

我认为这是最优雅的解决方案。

Answer 2

每组3个按钮必须具有自己的背景对象，以存储每个按钮的状态。我建议你创建三个功能来处理3个按钮。

以下是6个按钮的示例：

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>

更改循环

2 个答案: