Question

我求角色和MVC开发者，

我使用的是两个html按钮，其默认背景颜色为“红色＆＃39;”，当我点击button1时，它的变化背景颜色为“绿色”。在button1和button2中，它是＆＃39; Blue＆＃39;。

这里是代码，

<button id="outer" style="background-color:red">BUTTON1</button>
<button class="btn-5" id="outer" style="background-color:red">BUTTON2</button>

Answer 1

我们可以简单地使用ng-class

<button id="outer" style="background-color:red" ng-class="{background-color:green:changebgColor}" ng-click="changebgColor=!changebgColor">BUTTON1</button>
<button class="btn-5" id="outer" style="background-color:red" ng-class="{background-color:blue:changebgColor}">BUTTON2</button>

Answer 2

您可以在代码段中运行代码以查看结果。

＆＃13;

var app = angular.module("app",[]);

  app.controller("con",function($scope){
    $scope.class1 = "red";
    $scope.class2 = "red";
    $scope.changeClass = function(){     
        $scope.class1 = "green";     
        $scope.class2 = "blue";  
        };
  });

＆＃13;

.green{
    background-color:green;
  }
  .blue{
    background-color:blue;
  }
  .red{
    background-color:red;
  }

＆＃13;

<html ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="con">
<button id="outer" ng-class="class1" ng-click="changeClass()">BUTTON1</button>
<button id="outer" ng-class="class2" ng-click="changeClass()">BUTTON2</button>
</body>

＆＃13;

如何在点击按钮时更改按钮的背景颜色？

2 个答案: