我正在尝试做一个练习，其中有 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;
}
最佳答案
您可以尝试此代码。
<!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>
关于javascript - 如何使用 Angular 在单击时动态地将类添加到其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34715395/