Question

我正在尝试进行练习，其中有4个不同的颜色框和下面的1个主框是空白的，当您单击其中一个彩色框时，主框会更改为您刚刚单击的框的颜色上。这似乎是jQuery的一块蛋糕，但我不知道如何使用Angular

(function() {
  'use strict';

function angularBoxesCtrl() {
  var vm = this;
  vm.mainBoxColor;

  vm.logClass = function(e) {
    var boxColor = e.target.classList[1];
    vm.mainBoxColor = boxColor;
    console.log(vm.mainBoxColor);
  }

}



angular.module('angularBoxes', [])
  .controller('angularBoxesCtrl', [
    angularBoxesCtrl
    ]);


})();

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular Boxes</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body ng-app="angularBoxes">
  <div ng-controller="angularBoxesCtrl as vm" class="boxHolder">
    <div ng-click="vm.logClass($event)" class="box green"></div>
    <div ng-click="vm.logClass($event)" class="box blue"></div>
    <div ng-click="vm.logClass($event)" class="box red"></div>
    <div ng-click="vm.logClass($event)" class="box yellow"></div>
  </div>
  <div class="mainBox" ng-class></div>

  <!-- scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="app.js"></script>

</body>
</html>

CSS

div {
  box-sizing: border-box;
}
.boxHolder {
  border: 1px solid black;
  text-align: center;
  font-size: 0;
}

.box {
  width: 180px;
  height: 180px;
  display: inline-block;
  border: 1px solid black;
  margin: 4px;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.mainBox {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid black;
  position: relative;
  top: 80px;
}

Answer 1

您可以尝试使用此代码。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
 </head>

 <body>
  <input type="button" value="Red" ng-click="myStyle={background:'red'}">
  <input type="button" value="Green" ng-click="myStyle={background:'green'}">
  <input type="button" value="Blue" ng-click="myStyle={background:'blue'}">
  <input type="button" value="Yellow" ng-click="myStyle={background:'yellow'}">
  <input type="button" value="Lime" ng-click="myStyle={background:'lime'}">
  <input type="button" value="Magenta" ng-click="myStyle={background:'magenta'}">
  <input type="button" value="Pink" ng-click="myStyle={background:'pink'}">
  <input type="button" value="White" ng-click="myStyle={background:'white'}"> 

  <div ng-style="myStyle" >
    </BR></BR></BR></BR></BR>
    <Center>
    <h1>Hello</BR>
     C-Sharp</BR>
     Corner</BR>
    POST BY: Punit Gajjar
    </H1></center></BR></BR></BR></BR></BR>
   </div>
 </body>
</html>

Answer 2

试试这段代码：

l1

Answer 3

你可以这样做

<div class="mainBox" ng-style="{'background-color': {{myColor}}}"></div>

点击您的按钮点击通话功能

<a ng-click="SetClass($event)" class="green">Make Green</a>

$scope.SetClass = function(obj) {           

        //console.log(obj);            
        // Alert just the data value
        $scope.myColor = obj.target.attributes.class.value;

    }

或者你可以设置一个包含这样的css的变量

 $scope.myStyle = {
          "background": obj.target.attributes.class.value;
        };

然后像往常一样使用ng-style。

 <div ng-style="myStyle"></div>

如何使用Angular在单击时动态地将类添加到其他元素

3 个答案: