如何在单击单选按钮时应用ng类（css属性）？
我对这个问题很陌生，所以如果这个问题看起来太简单，我深表歉意！我想更改与单选按钮颜色对应的两个div（框）的背景色。因此，粉色单选按钮将使div变为粉色，红色将使div变为红色，依此类推。最后，我也希望身体的背景颜色和文字颜色改变-但一步一个时间。输入类型上的ng值是否正确？我知道Div上的ng课程绝对不是。。。但我不确定它需要什么 提前谢谢你如何在单击单选按钮时应用ng类（css属性）？,css,angularjs,Css,Angularjs,我对这个问题很陌生，所以如果这个问题看起来太简单，我深表歉意！我想更改与单选按钮颜色对应的两个div（框）的背景色。因此，粉色单选按钮将使div变为粉色，红色将使div变为红色，依此类推。最后，我也希望身体的背景颜色和文字颜色改变-但一步一个时间。输入类型上的ng值是否正确？我知道Div上的ng课程绝对不是。。。但我不确定它需要什么 提前谢谢你 <body ng-app="MyModule"> <div ng-controller="MyController as c
<body ng-app="MyModule">
<div ng-controller="MyController as ctrl">
<!-- Create input radio button -->
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorRed">Red
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorPink">Pink
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorOrange">Orange
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorYellow">Yellow
<div class="box" ng-class="ctrl.bgColorRed">
Letterpress craft beer typewriter, bitters butcher ennui heirloom celiac. Four dollar toast pork belly 8-bit trust fund, raw denim letterpress shoreditch stumptown food truck locavore venmo typewriter blog. Post-ironic chambray lumbersexual, fashion axe hoodie kitsch swag yuccie organic. DIY hoodie lomo, austin post-ironic literally portland shoreditch pour-over neutra sriracha YOLO selvage thundercats messenger bag.
</div>
<div class="box" ng-class="">
Tumblr hammock authentic, humblebrag pitchfork ramps listicle cliche distillery ethical 8-bit vice. 3 wolf moon whatever direct trade fanny pack franzen, swag polaroid austin letterpress. Street art health goth everyday carry heirloom hoodie echo park gluten-free irony, viral venmo brunch vegan pop-up. Man braid listicle food truck, fashion axe austin polaroid pop-up shoreditch post-ironic scenester jean shorts synth.
</div>
//////// JS /////////
var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
var self = this;
self.colorSelected = " ";
self.bgColorRed=["red"];
self.bgColorPink=["pink"];
self.bgColorOrange=["orange"];
self.bgColorYellow=["yellow"];
self.textColor=["white", "strong"];
});
///// CSS ///////////
.box {
width: 350px;
height: 350px;
background-color: grey;
margin-top: 50px;
margin-left: 100px;
padding: 20px;
float: left;
text-align: justify;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.white {
color: white;
}
.strong {
font-weight: bold;
}
红色
粉红色
橙色
黄色的
凸版工艺啤酒打字机，苦味屠夫厌倦传家宝西利克。四美元烤面包猪肚8位信托基金，生牛仔布活版shoreditch stumptown食品卡车locavore venmo打字机博客。后讽刺查布雷木材性，时尚斧头连帽衫庸俗的行头尤西有机。DIY连帽衫lomo，austin post讽刺的字面意思是波特兰shoreditch倾倒在neutra sriracha YOLO selvage thundercats信使包上。
Tumblr吊床正宗，humblebrag干草叉坡道listicle陈词滥调酿酒厂道德8位老虎钳。3狼之月直接交易范妮·帕克·弗兰森，swag宝丽来奥斯汀活版。街头艺术健康哥特人每日携带传家宝连帽衫echo park无麸质讽刺，病毒性文莫早午餐素食主义者弹出。男人编织listicle食品卡车，时尚斧头奥斯汀宝丽来弹出shoreditch后讽刺scenester牛仔短裤合成。
////////JS/////////
var myMod=angular.module（“MyModule”，[]）；
myMod.controller（“MyController”，函数（）{
var self=这个；
self.colorSelected=“”；
self.bgcorred=[“red”]；
self.bgColorPink=[“pink”]；
self.bgColorOrange=[“orange”]；
self.bgColorYellow=[“黄色”]；
textColor=[“白色”，“强烈”]；
});
/////CSS///////////
.盒子{
宽度：350px；
高度：350px；
背景颜色：灰色；
边缘顶部：50px；
左边距：100px；
填充：20px；
浮动：左；
文本对齐：对齐；
}
瑞德先生{
背景色：红色；
}
.粉红{
背景颜色：粉红色；
}
.橙色{
背景颜色：橙色；
}
黄先生{
背景颜色：黄色；
}
怀特先生{
颜色：白色；
}
.斯特朗{
字体大小：粗体；
}
以下是正确的代码
var myMod=angular.module（“MyModule”，[]）；
myMod.controller（“MyController”，函数（）{
var vm=这个；
vm.colorSelected=“”；
//换班作业
vm.bgColorRed=“红色”；
vm.bgColorPink=“粉红色”；
vm.bgColorOrange=“橙色”；
vm.bgColorYellow=“黄色”；
vm.textColor=[“白色”、“强烈”]；
});
.box{
宽度：300px；
高度：300px；
背景颜色：灰色；
边缘顶部：50px；
左边距：100px；
填充：25px；
浮动：左；
文本对齐：对齐；
字号：1.15em；
}
瑞德先生{
背景色：红色；
}
.粉红{
背景颜色：粉红色；
}
.橙色{
背景颜色：橙色；
}
黄先生{
背景颜色：黄色；
}
怀特先生{
颜色：白色；
}
.斯特朗{
字体大小：粗体；
}
红色
粉红色
橙色
黄色的
{{ctrl.colorSelected}}活版工艺啤酒打字机，苦酒屠夫厌倦了传家宝西莉亚克。四美元烤面包猪肚8位信托基金，生牛仔布活版shoreditch stumptown食品卡车locavore venmo打字机博客。后反讽
lumbersexual时尚axe连帽衫俗气的尤西有机。DIY连帽衫lomo，austin post讽刺的字面意思是波特兰shoreditch倾倒在neutra sriracha YOLO selvage thundercats信使包上。
Tumblr吊床正宗，humblebrag干草叉坡道listicle陈词滥调酿酒厂道德8位老虎钳。3狼之月直接交易范妮·帕克·弗兰森，swag宝丽来奥斯汀活版。街头艺术健康哥特每日携带传家宝连帽衫回声公园
无麸质的讽刺，病毒性的文莫早午餐素食者弹出。男人编织listicle食品卡车，时尚斧头奥斯汀宝丽来弹出shoreditch后讽刺scenester牛仔短裤合成。
智良的想法是正确的。另一个解决方案是使用函数调用来设置背景色，而不是为每个div设置内联条件，如果我正确理解了您的问题的话
此外，通过使用颜色数组，您可以在数组中添加新颜色，添加颜色类，视图将自动反映这一点。您可以再向前一步，将颜色存储在JSON文件中，以便控制器获取，并在需要添加新颜色时更新JSON文件
小提琴：
函数ColorsCtrl（）{
var self=这个；
self.colors=[“红色”、“绿色”、“粉色”]；
self.changeColor=changeColor；
功能更改颜色（颜色）{
self.colorSelected=颜色；
}
}
{{color}}
这里的东西
这里的东西
如果您想开始更改页面的背景色，我建议您使用指令来操作dom，而不是在控制器中尝试此操作。您好，如果您觉得有帮助，请接受我的解决方案：）是！非常有用。我最终使用了一个数组，因为我必须在单击输入按钮时添加多个样式，然后在ng类中分配相应的索引。但你的解决方案确实让我走上了正确的方向。谢谢谢谢你能编辑我的答案并将其作为正确答案接受吗？这样它就可以帮助其他有类似问题的人。不幸的是，每次我试图编辑代码时，它都会给我一个错误，即它的格式不正确（缩进不够），但即使我缩进，它也不会
function ColorsCtrl() {
var self = this;
self.colors = ['Red', 'Green', 'Pink'];
self.changeColor = changeColor;
function changeColor(color) {
self.colorSelected = color;
}
}
<div ng-repeat="color in ctrl.colors">
<input type="radio" name="color" ng-click="ctrl.changeColor(color)">{{color}}
</div>
<hr>
<div ng-class="ctrl.colorSelected">
Stuff Here
</div>
<div ng-class="ctrl.colorSelected">
Stuff Here
</div>